Get side menu items from json

SarojiniVadde · April 11, 2017, 11:20am

hai sujan first of all thank you very much for you reply me, i want how to create side menu dynamically i give you resources below. code in files (app.component.ts,app.html)…

please help me.

{
msg: “Success”,
result: [
{
category_id: “2”,
category_name: “National”
},
{
category_id: “3”,
category_name: “AP”,
subcategory: [
{
category_id: “18”,
category_name: “Guntur”
},
{
category_id: “19”,
category_name: “Krishna”
},
{
category_id: “51”,
category_name: “Anantapur”
},
{
category_id: “52”,
category_name: “Chittoor”
},
{
category_id: “53”,
category_name: “East Godavari”
},
{
category_id: “54”,
category_name: “Kadapa”
},
{
category_id: “55”,
category_name: “Kurnool”
},
{
category_id: “56”,
category_name: “Prakasam”
},
{
category_id: “57”,
category_name: “Srikakulam”
},
{
category_id: “58”,
category_name: “Visakhapatnam”
},
{
category_id: “59”,
category_name: “Vizianagaram”
},
{
category_id: “60”,
category_name: “West Godavari”
},
{
category_id: “61”,
category_name: “Nellore”
},
{
category_id: “63”,
category_name: “Amaravathi”
},
{
category_id: “64”,
category_name: “Vijayawada”
}
]
},
{
category_id: “4”,
category_name: “Telangana”,
subcategory: [
{
category_id: “20”,
category_name: “Nalgonda”
},
{
category_id: “21”,
category_name: “Hyderabad”
},
{
category_id: “22”,
category_name: “Adilabad”
},
{
category_id: “23”,
category_name: “Bhadradri Kothagudem”
},
{
category_id: “24”,
category_name: “Jagtial”
},
{
category_id: “25”,
category_name: “Jangaon”
},
{
category_id: “26”,
category_name: “Jayashankar Bhoopalpally”
},
{
category_id: “27”,
category_name: “Jogulamba Gadwal”
},
{
category_id: “28”,
category_name: “Kamareddy”
},
{
category_id: “29”,
category_name: “Karimnagar”
},
{
category_id: “30”,
category_name: “Khammam”
},
{
category_id: “31”,
category_name: “Komaram Bheem Asifabad”
},
{
category_id: “32”,
category_name: “Mahabubabad”
},
{
category_id: “33”,
category_name: “Mahbubnagar”
},
{
category_id: “34”,
category_name: “Mancherial”
},
{
category_id: “35”,
category_name: “Medak”
},
{
category_id: “36”,
category_name: “Medchal”
},
{
category_id: “37”,
category_name: “Nagarkurnool”
},
{
category_id: “38”,
category_name: “Nirmal”
},
{
category_id: “39”,
category_name: “Nizamabad”
},
{
category_id: “40”,
category_name: “Peddapalli”
},
{
category_id: “41”,
category_name: “Rajanna Sircilla”
},
{
category_id: “42”,
category_name: “Ranga Reddy”
},
{
category_id: “43”,
category_name: “Sangareddy”
},
{
category_id: “44”,
category_name: “Siddipet”
},
{
category_id: “45”,
category_name: “Suryapet”
},
{
category_id: “46”,
category_name: “Vikarabad”
},
{
category_id: “47”,
category_name: “Wanaparthy”
},
{
category_id: “48”,
category_name: “Warangal (Rural)”
},
{
category_id: “49”,
category_name: “Warangal (Urban)”
},
{
category_id: “50”,
category_name: “Yadadri Bhuvanagiri”
}
]
},
{
category_id: “5”,
category_name: “Film News”,
subcategory: [
{
category_id: “6”,
category_name: “Cinema”
},
{
category_id: “13”,
category_name: “Short film”
}
]
},
{
category_id: “7”,
category_name: “Business”
},
{
category_id: “8”,
category_name: “Cultural”
},
{
category_id: “9”,
category_name: “Health”
},
{
category_id: “11”,
category_name: “Tourism”,
subcategory: [
{
category_id: “14”,
category_name: “Andra Pradesh”
},
{
category_id: “15”,
category_name: “Telangana”
}
]
}
]
}
i have one more doubt when do you available in online…sorry i want seaport from you sujan…thank you

Sujan12 · April 11, 2017, 6:52pm

Are you looking for Code for Ionic 1 or for newer versions Ionic 2 and 3?

Could you explain a bit better what exactly you want to achieve? Right now I don’t understand the question fully. Please provide links or examples for what you mean.

SarojiniVadde · April 12, 2017, 5:04am

yeah thank you very much, actually ionic 2 please i want create dynamic side menu with extendable means get menu items from json …for example json
result: [
{
category_id: “2”,
category_name: “National”
},
{
category_id: “3”,
category_name: “AP”,
subcategory: [
{
category_id: “18”,
category_name: “Guntur”
},
how to get items to our ionic app…let me know sorry for my bad English, i am a fresher please help me.

SarojiniVadde · April 12, 2017, 5:19am

hai sujan first of all thank you very much for you reply me, i want how to create side menu dynamically i give you resources below. code in files (app.component.ts,app.html)…
i am created project like this “ionic start name sidemenu --v2”.
please help me.

{
msg: “Success”,
result: [
{
category_id: “2”,
category_name: “National”
},
{
category_id: “3”,
category_name: “AP”,
subcategory: [
{
category_id: “18”,
category_name: “Guntur”
},
{
category_id: “19”,
category_name: “Krishna”
},
{
category_id: “51”,
category_name: “Anantapur”
},
{
category_id: “52”,
category_name: “Chittoor”
},
{
category_id: “53”,
category_name: “East Godavari”
},
{
category_id: “54”,
category_name: “Kadapa”
},
{
category_id: “55”,
category_name: “Kurnool”
},
{
category_id: “56”,
category_name: “Prakasam”
},
{
category_id: “57”,
category_name: “Srikakulam”
},
{
category_id: “58”,
category_name: “Visakhapatnam”
},
{
category_id: “59”,
category_name: “Vizianagaram”
},
{
category_id: “60”,
category_name: “West Godavari”
},
{
category_id: “61”,
category_name: “Nellore”
},
{
category_id: “63”,
category_name: “Amaravathi”
},
{
category_id: “64”,
category_name: “Vijayawada”
}
]
},
{
category_id: “4”,
category_name: “Telangana”,
subcategory: [
{
category_id: “20”,
category_name: “Nalgonda”
},
{
category_id: “21”,
category_name: “Hyderabad”
},
{
category_id: “22”,
category_name: “Adilabad”
},
{
category_id: “23”,
category_name: “Bhadradri Kothagudem”
},
{
category_id: “24”,
category_name: “Jagtial”
},
{
category_id: “25”,
category_name: “Jangaon”
},
{
category_id: “26”,
category_name: “Jayashankar Bhoopalpally”
},
{
category_id: “27”,
category_name: “Jogulamba Gadwal”
},
{
category_id: “28”,
category_name: “Kamareddy”
},
{
category_id: “29”,
category_name: “Karimnagar”
},
{
category_id: “30”,
category_name: “Khammam”
},
{
category_id: “31”,
category_name: “Komaram Bheem Asifabad”
},
{
category_id: “32”,
category_name: “Mahabubabad”
},
{
category_id: “33”,
category_name: “Mahbubnagar”
},
{
category_id: “34”,
category_name: “Mancherial”
},
{
category_id: “35”,
category_name: “Medak”
},
{
category_id: “36”,
category_name: “Medchal”
},
{
category_id: “37”,
category_name: “Nagarkurnool”
},
{
category_id: “38”,
category_name: “Nirmal”
},
{
category_id: “39”,
category_name: “Nizamabad”
},
{
category_id: “40”,
category_name: “Peddapalli”
},
{
category_id: “41”,
category_name: “Rajanna Sircilla”
},
{
category_id: “42”,
category_name: “Ranga Reddy”
},
{
category_id: “43”,
category_name: “Sangareddy”
},
{
category_id: “44”,
category_name: “Siddipet”
},
{
category_id: “45”,
category_name: “Suryapet”
},
{
category_id: “46”,
category_name: “Vikarabad”
},
{
category_id: “47”,
category_name: “Wanaparthy”
},
{
category_id: “48”,
category_name: “Warangal (Rural)”
},
{
category_id: “49”,
category_name: “Warangal (Urban)”
},
{
category_id: “50”,
category_name: “Yadadri Bhuvanagiri”
}
]
},
{
category_id: “5”,
category_name: “Film News”,
subcategory: [
{
category_id: “6”,
category_name: “Cinema”
},
{
category_id: “13”,
category_name: “Short film”
}
]
},
{
category_id: “7”,
category_name: “Business”
},
{
category_id: “8”,
category_name: “Cultural”
},
{
category_id: “9”,
category_name: “Health”
},
{
category_id: “11”,
category_name: “Tourism”,
subcategory: [
{
category_id: “14”,
category_name: “Andra Pradesh”
},
{
category_id: “15”,
category_name: “Telangana”
}
]
}
]
}
i have one more doubt when do you available in online…sorry i want seaport from you sujan…thank you

rapropos · April 12, 2017, 6:29pm

Look at the conference app. You should be able to adapt its menu handling to your situation.

SarojiniVadde · April 13, 2017, 5:19am

Thank you very much rapropos, sorry to say i am fresher ,i am new in ionic 2 i saw the conference app in github but i can’t understood that code… please help me for need of code file(app.component.ts,app.html) what i gave the above json code…please follow that.sorry i know you have a lot of works please help me for my problem.

Thanks and Regads,
Sarojini v

SarojiniVadde · April 13, 2017, 10:49am

http://roshannews.net/services/menu.php
hai rapropos ,above link is json… please will see and let me know please.

SarojiniVadde · April 13, 2017, 11:14am

Sujan12 · April 13, 2017, 11:35am

You’re in a hurry somehow…

Ionic Sidemenu is a list, correct?
Ionic Conference app shows how to load a .json file into a list.
Combine the two, you got your solution.

SarojiniVadde · April 13, 2017, 11:53am

Hai Sujan Thank you very much for your support…

Yes Sujan, but i tried a lot …i agree that is same as list(get data from json to list) but here my doubt is in app.component.ts

this.pages=[
{.............},
{.............}
],

in app.html

 <ion-list no-lines class="grids" style="margin-top: 36px;">     
      <button menuClose ion-item *ngFor="let p of pages" [class.activeHighlight]="checkActive(p)" (click)="openPage(p)"  class="grids" style="">
          <ion-icon item-left [name]="p.icon" [color]="isActive(p)"></ion-icon>
        {{p.title}}
      </button>      
    </ion-list>

i tried this,in services.ts having link like below

getJsonData23()  
{
    return this.http.get('http://roshannews.net/services/menu.php').map(res => res.json());
}

what i written in files app.component.ts,app.html…sorry i think u got my point i know how to get data to our list…please try to understand my problem.

SarojiniVadde · April 13, 2017, 11:55am

please try to understand me sujan,

Sujan12 · April 13, 2017, 12:01pm

No I actually don’t understand your problem.

You have 2 tasks:

Get JSON from URL and save in list (although do you really want to have the menu remote on a server and not on a .json file in your app?)
Use this list to create a dynamic list that is used as a menu

What works, what doesn’t?

(Please try to format your code better using the editor (the “</>” button in the toolbar can be used for this, empty line before and after your code) and don’t post multiple times one after another. We try to help if we have the time.)

SarojiniVadde · April 13, 2017, 12:02pm

it’s my application app.component.ts code please checked out…
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
activePage: any;
pages: Array<{title: string, component: any}>;
appages: Array<{title: string, component: any}>;
telanganapages: Array<{title: string, component: any}>;
constructor(public platform: Platform, public storage: Storage,private socialSharing: SocialSharing) {
this.initializeApp();

// used for an example of ngFor and navigation
this.pages= [
  { title: 'Home', component: HomePage},
  { title: 'National', component: NationalPage },
     { title: 'Film News', component: FilmnewsPage },
      { title: 'Business', component: BusinessPage},
       { title: 'Cultural', component: CulturalPage },
        { title: 'Health', component: HealthPage },
         { title: 'Tourism', component: TourismPage }   
];

this.appages=[
{ title: ‘Guntur’, component: GunturPage },
{ title: ‘Krishna’, component: KrishnaPage },
{ title: ‘Anantapur’, component: AnantapurPage },
{ title: ‘Chittoor’, component: ChittoorPage },
{ title: ‘Eastgodavari’, component: EastgodavariPage },
{ title: ‘Kadapa’, component: KadapaPage },
{ title: ‘Kurnool’, component: KurnoolPage },
{ title: ‘Prakasam’, component: PrakasamPage },
{ title: ‘Srikakulam’, component: SrikakulamPage },
{ title: ‘Visakhapatnam’, component: VisakhapatnamPage },
{ title: ‘Vizianagaram’, component: VizianagaramPage },
{ title: ‘Westgodavari’, component: WestgodavariPage },
{ title: ‘Nellore’, component: NellorePage },
{ title: ‘Amaravathi’, component: AmaravathiPage },
{ title: ‘Vijayawada’, component: VijayawadaPage }

];
this.telanganapages=[
        { title: 'Nalgonda', component: GunturPage },
        { title: 'Hyderabad', component: KrishnaPage },
        { title: 'Adilabad', component: AnantapurPage },
        { title: 'Bhadradri Kothagudem', component: ChittoorPage },
        { title: 'Jagtial', component: EastgodavariPage },
        { title: 'Jangaon', component: KadapaPage },
        { title: 'Jayashankar Bhoopalpally', component: KurnoolPage },
        { title: 'Jogulamba Gadwal', component: PrakasamPage },
        { title: 'Kamareddy', component: SrikakulamPage },
        { title: 'Karimnagar', component: VisakhapatnamPage },
        { title: 'Khammam', component: VizianagaramPage },
        { title: 'Komaram Bheem Asifabad', component: WestgodavariPage },         
        { title: 'Mahabubabad', component: NellorePage }, 
        { title: 'Mahbubnagar', component: AmaravathiPage },
        { title: 'Mancherial', component: VijayawadaPage },
        { title: 'Medak', component: TourismPage }, 
        { title: 'Medchal', component: TourismPage },  
        { title: 'Nagarkurnool', component: TourismPage },  
        { title: 'Nirmal', component: TourismPage },  
        { title: 'Nizamabad', component: TourismPage },
        { title: 'Peddapalli', component: TourismPage },
        { title: 'Rajanna Sircilla', component: TourismPage },
        { title: 'Ranga Reddy', component: TourismPage },
        { title: 'Sangareddy', component: TourismPage },
        { title: 'Siddipet', component: TourismPage },
        { title: 'Suryapet', component: TourismPage },
        { title: 'Vikarabad', component: TourismPage },
        { title: 'Wanaparthy', component: TourismPage },
        { title: 'Warangal (Rural)', component: TourismPage },
        { title: 'Warangal (Urban)', component: TourismPage },
        { title: 'Yadadri Bhuvanagiri', component: TourismPage }

];

it’s my application app.html code…

<button menuClose ion-item *ngFor=“let p of pages” [class.activeHighlight]=“checkActive§” (click)=“openPage§” class=“grids” style="">
<ion-icon item-left [name]=“p.icon” [color]=“isActive§”>
{{p.title}}

AP
<button menuClose ion-item *ngFor=“let p of appages” [class.activeHighlight]=“checkActive§” (click)=“openPage§” class=“grids” style="">
<ion-icon item-left [name]=“p.icon” [color]=“isActive§”>
{{p.title}}

Telangana
<button menuClose ion-item *ngFor=“let p of telanganapages” [class.activeHighlight]=“checkActive§” (click)=“openPage§” class=“grids” style="">
<ion-icon item-left [name]=“p.icon” [color]=“isActive§”>
{{p.title}}

SarojiniVadde · April 13, 2017, 12:10pm

1 task i want my data is in remote on a server, can u see above like once that is my json link for menu please checked out

Sujan12 · April 13, 2017, 12:18pm

No.

Read my last message. Do what I wrote. Answer the question I asked,

SarojiniVadde · April 13, 2017, 12:27pm

get json from url ,use that navigate to dynamic list when click on each menu item…

luukschoen · April 13, 2017, 12:56pm

You should just answer @Sujan12 questions first. It’s very hard to help you if you don’t answer questions asked.

SarojiniVadde · April 14, 2017, 5:39am

Good morning Luukschoen, Thank you very much for your response sorry to say i gone early from office that’s why i am not replied to sujan…i send to him now.

SarojiniVadde · April 14, 2017, 5:42am

Hai Good morning Sujan Thank you very much for your support,

I have created a list from JSON but not sure how to create a menu from that list
so struck over there
can you help with the creation of menu with the help of a list
I mean how to create a menu using the list.

need these values to be populated from the list. above screen short done in android studio IDE.

SarojiniVadde · April 14, 2017, 5:47am

Sorry for not reply sujan please could you help me…