Get side menu items from json

[SarojiniVadde]

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]

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]

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]

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]

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

[SarojiniVadde]

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]

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

[SarojiniVadde]

[Sujan12]

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]

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]

please try to understand me sujan,

[Sujan12]

No I actually don’t understand your problem.

You have 2 tasks:

1. 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?)
2. 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]

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]

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]

No.

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

[SarojiniVadde]

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

[luukschoen]

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

[SarojiniVadde]

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]

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]

Sorry for not reply sujan please could you help me…