Dynamic Tab creation from JSON response


#1

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