Ionic 3: Error trying to diff '[object Object]'

Question

I want to display FCM push notification to homepage in a form of loop. However, I received this error

HomePage.html:18 ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed(…)

I am sorry.. stil new in Ionic 3 (and typescript), anyway thank you in advance

Here's my code:

app.component.ts

      // Receiving token from FCM
      FCMPlugin.getToken(
        (t) => {
          console.log(t);
        },
        (e) => {
          console.log(e);
        }
      );

      // Receiving notification when app is in background
      FCMPlugin.onNotification(
        (infos) => {
          this.dataProvider.fcmPassing(infos);
          console.log(infos);

          // Display notification when app on foreground
          let basicAlert = this.alertCtrl.create({
            title: infos.title,
            subTitle: infos.body,
            buttons: ['OK']
          });
          basicAlert.present();
          },
        (e) => {
          console.log(e);
        }
      );

data.ts

  // Calling FCM data
  fcmReceiving() {
    return this.storage.get('fcmData');
  }  

  // Saving FCM data
  fcmPassing(infos) {
    this.storage.set('fcmData', infos);
  }

home.ts

 infos: Promise<any>;
 public notis = [];

 // Calling FCM data via DataProvider
this.dataProvider.fcmReceiving()
.then((info) => {
  console.log('fcm data', info);
  this.infos = info.title;
  this.notis = info;
})

home.html

  <ion-list>
    <ion-item *ngFor="let noti of notis" (click)="passingFCM(infos)">Hello {{noti.title}}</ion-item>
  </ion-list>

Show us how `notis` looks like, what error is saying is that you are trying to loop over object — mxr7350, Feb 14 '18 at 16:07
@mxr7350 notis is an empty array.. If then, how can I loop an object? — Zubli Quzaini, Feb 14 '18 at 16:14
No it isn't, unless `info` is too (`this.notis = info;`) which is unlikely since it has a property. You can't loop over an object; it doesn't make any sense. `{{noti.title}}` should print the title if you just remove the loop altogether. — JJJ, Feb 14 '18 at 16:17
You declared `notis` to be empty array, but than in the `fcmReceiving()` you are setting it to `info` which is by error Implication Object — mxr7350, Feb 14 '18 at 16:25

score 1 · Accepted Answer · answered Feb 14 '18 at 16:20

You commented that notis is an array, but you imply in your code example that the retrieved info is an object:

console.log('fcm data', info);
this.infos = info.title;
this.notis = info;

In this case, this.notis is not an array. It is whatever info is, which in your case is not an array as it contains other data, like info.title

set this.notis to the array within info

Ionic 3: Error trying to diff '[object Object]'

1 Answers1