I am new in Ionic and AnguarJs. I have to create tabs dynamically using ngFor. Tab title values should be displayed from JSON response
<ion-tabs >
<ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
<ion-tab *ngFor="let rew of people" [root]="rew.root" [tabTitle]="rew.name"></ion-tab>
<ion-tab *ngFor="let cat of rew?.children" [tabTitle]="cat.name"></ion-tab>
</ion-tabs>
My JSON
{
"category_id": 1,
"parent_id": 0,
"name": "Root Catalog",
"position": 0,
"level": 0,
"children": [
{
"category_id": 2,
"parent_id": 1,
"name": "Default Category",
"is_active": 1,
"position": 1,
"level": 1,
"children": [
{
"category_id": 5,
"parent_id": 2,
"name": "Masala Mix",
"is_active": 1,
"position": 1,
"level": 2,
"children": []
},
{
"category_id": 3,
"parent_id": 2,
"name": "Pure spices",
"is_active": 1,
"position": 2,
"level": 2,
"children": []
},
{
"category_id": 6,
"parent_id": 2,
"name": "Pickles",
"is_active": 1,
"position": 3,
"level": 2,
"children": []
},
]}]}
Typescript code
loadPeople() {
this.peopleSearch.load()
.then(data1 => {
this.people = data1.children;
console.log("Tabs : "+this.people);
}
);
}
Tabs output in browser console
Tabs : [object Object]
Http Requestprovider.ts
export class PeopleSearch {
data1: any;
constructor(public http: Http) {
console.log('Hello PeopleSearch Provider');
}
load() {
if (this.data1) {
return Promise.resolve(this.data1);
}
// Dont have the data yet
return new Promise(resolve => {
this.http.get('http://happyos.in/cat.php')
.map(res => res.json())
.subscribe(data => {
this.data1 = data;
resolve(this.data1);
});
});
}
}
Now output screen shows one tab creation with name "Default Category" which is the first entry of JSON. But i want my Tabs with the name "Masala Mix", "Pure Spices"," Pickles" etc
Output Screen
Ionic info