ionic 2 render data before view load

Question

I am learning ionic 2 and currently facing some ionic lifecycle issue. I want to show data after api gets success data.

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {LoadingController} from 'ionic-angular';

import WooCommerceAPI from 'woocommerce-api';

@Component({
  selector: 'page-category',
  templateUrl: 'category.html',
})
export class CategoryPage {

  information: any[] = [];
  infoChild: any[] = [];
  wooApi: any;
  wooCat: any;
  categories: any = [];

  constructor(public navCtrl: NavController, public loadingCtrl: LoadingController) {
      this.wooApi = WooCommerceAPI(
          {
            url: 'abc.com/api/v1/cat',

          }
        );
//here also tried to call api

    }


  ngOnInit() {
//here also tried to call api

  }
  ionViewDidLoad() {
    console.log("calling api");
    /*from with nginit*/
    this.wooApi.getAsync('products/categories?parent=0').then((data) => {
      console.log("success");
      this.wooCat = JSON.parse(data.body);
      //this.information = this.wooCat;
      for (let i = 0; i < this.wooCat.length; i++) {
        console.log("in for loop");
        this.wooApi.getAsync('products/categories?parent=' + this.wooCat[i].id).then((data) => {
          console.log("get success", i);
          let wooChild = JSON.parse(data.body);
          for (let x = 0; x < wooChild.length; x++) {
            this.infoChild.push(wooChild[x]['name']);
          }
          //console.log(this.infoChild)
          this.information.push({
            'items': {
              'name': this.wooCat[i]['name'],
              'children': [{
                'name': this.infoChild
              }]
            }
          });
          this.infoChild = [];
        });

      }
      console.log("current data", this.information);

    });

  }

}

I have tried to call api with constructor() also with **ngOnInit() & ionViewDidLoad() ** data is getting properly but not reflecting on my view/html page.

My Html code is as follows:

<accordion *ngFor="let catParent of information" [title]="catParent.items.name">
      <!-- (click)="itemSelected(item)" -->
      <ion-list *ngFor="let catChild of catParent.items.children">
          <button ion-item *ngFor="let catChildName of catChild.name">
            {{ catChildName }}
          </button>
        </ion-list>
  </accordion>

so when I click on category tab api is calling and getting response but not able to see this result on my view page, now if I click on any other tab and again click on category tab then I am able to see this data.

As I am new to ionic 2 I am not able to fix this issue. Can any one please help me to sort out this issue.

Thanks in advance :)

Answer 1

1. It's best practice to fire HTTP requests from service or provider class
2. IonViewDidLoad runs only when the page is loaded so the empty page will be loaded before the HTTP request is fired.
3. Use IonViewCanEnter which can run before the view renders
4. Display loading using ionic loading component so user will know something is happening in the background

Answer 2

Wrap your accordion with a div containing a condition on your information data :

<div *ngIf="information.length>0;else noData">
    <accordion *ngFor="let catParent of information" [title]="catParent.items.name">
          ...
    </accordion>
</div>

<ng-template #noData>Loading accordion...</ng-template>