Ionic - Dynamic tab creation from JSON response - json

Question

I am very new to Ionic and Angular. Basically, I need to create tabs dynamically based on JSON response from my own server.
My JSON response
{
"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": []
},
]}]}
My output should be with the creation of 3 tabs with a name as "Masala Mix", "Pure Spices" and "Pickles". But what I get now is only one tab creation with the name "Default category"
<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>
TypeScript File
loadPeople() {
this.peopleSearch.load()
.then(data1 => {
this.people = data1.children;
console.log("Tabs : "+this.people);
}
);
}
Browser console output : Tabs : [object Object]
HTTP provider
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);
});
});
}
}
Output