Typescript Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

1
votes

(Sorry for bad English, I am not a native speaker)
I am having problem passing values to an object, and showing it in html. Below are my codes:

  completeUserProfile = {};


  async testfunction() {
    const sampleArray = [1, 2];
    const interestRef = this.firestore.firestore.collection('interest');
    const result = interestRef.where('interestIn', 'array-contains-any', sampleArray).get();
    await result.then(querySnapshot => {
      querySnapshot.forEach(doc => {
        this.completeUserProfile[doc.data()['uid']] = {};
        this.completeUserProfile[doc.data()['uid']].uid = doc.data().uid;
        this.completeUserProfile[doc.data()['uid']].interestIn = doc.data().interestIn;
        this.completeUserProfile[doc.data()['uid']].updatedAt = doc.data().updatedAt.toDate();
        this.firestore.firestore.collection('userInformation').where('uid', '==', doc.data().uid).limit(1)
          .get().then((userInfo) => {
            userInfo.forEach(doc => {
              this.completeUserProfile[doc.data()['uid']].realName = doc.data().realName;
            })
          })
        console.log(this.completeUserProfile[doc.data()['uid']]);
      })
    });
  }

I can see the results in console.log without issue. However, I cannot get to display my information in html using ngFor loop. Even if I just {{completeUserProfile }}, I will get the result of [object Object].

As I was dealing with Angular for the past month I realized I have to declare the object (in this case completeUserProfile) using : instead of =. But in this case I failed to do so. I need help. I appreciate for your time to read this.

2
angulartypescriptfirebasegoogle-cloud-firestore
You are trying to iterate on a Json property - yazan
I am new to this, I am not sure what is the Json property you are referring about. I would appreciate if you can tell me more exact on what I should do. Thank you - LTY526

2 Answers

1
votes

Like the error message says, plain *ngFor only works for iterables like an array. You're trying to loop through an object. In this case you could try to use the keyvalue pipe (Angular v6.1+). It returns a collection of objects each with key and value property. They correspond to the respective property key and value from the source object.

Try the following

<div *ngFor="let profile of completeUserProfile | keyvalue">
  {{ profile.key }}: {{ profile.value }}
</div>

Accordingly if you wish to render an object in the template, you need to use the json pipe.

<div> {{ completeUserProfile | json }} </div>

If you're new to Angular, I'd recommend you to go through their tutorial. It introduces some of the basics.

1
votes

ngFor iterates over arrays, The error tells you so and You are trying to iterate on a Json object.

If you want to iterate over it, you either have to change it to an array, or you have to iterate on the keys. To do that :

    completeUserProfileObject = [];
    
    this.completeUserProfileObjectKeys = Object.keys(this.completeUserProfile); // get keys
    this.completeUserProfileObject = Object.values(this.completeUserProfile); // get values

In your HTML :

<element *ngFor="let key of completeUserProfileObject">

StackBlitz