Accessing Json Object Data in Html


#1

So I am trying to extract data from a json object with pagination.I have a rest api that I call to get the info, I am then making an array of it, and at that point for some reason my *ngfor cannot access it and it throws me “NgFor only supports binding to Iterables such as Arrays”.

I know it is being received because if I log the whole array to the console it shows all the data is there or if I want to just call one item from it like this (mydata[0][0].title) it logs the correct data.

I think the issue is how my json data is formatted in the read pagination call and not knowing how to access it properly from within ionic. When I make a different read call to my rest api that extracts all the data from the database in one group instead of paging it the code works.

My rest provider function gets the data from the Rest Api.

  getAlertsPage(page) {
    return new Promise(resolve => {
      this.http.get(this.apiUrl+'/alerts/read_paging.php?page=' + page)
      .subscribe(data => {
        resolve(data);
      }, err => {
        console.log(err);
      });
    });
  }

Then I take that data and make an array out of it.

getAlerts() {
    this.restProvider.getAlertsPage(this.page)
    .then(data => {
      this.alerts = data;  
      this.alerts = Array.of(this.alerts);
      console.log(this.alerts[0][0].title);
      console.log(this.alerts);
    });
  }

And my html.

  <ion-list inset>
      <ion-item *ngFor="let alert of alerts">
        <ion-item *ngFor="let sub of alert" (click) = "alertInfo(sub.id, sub.latitude, sub.longitude)" [color]="sub.severityLevel">
            <h2>{{sub.title}}</h2>
            <p>{{sub.message}}</p>
            <p>{{sub.description}}</p>
            <p>{{sub.scheduleAt | date: "M/dd/yyyy"}}</p>
          </ion-item>
    </ion-item>
  </ion-list>

This is what the json data looks like from my pagination php.

And this is the json data from my read php that just gets all the data from the database which works with the above ionic code.