Angular *ngFor Array of Objects returning [ERROR: Cannot find a differ supporting object]

Question

I am trying to display in HTML a list of data as follows:

Home.ts:

this.key = 0
objects = {} // The correct setting was objects = [] thanks!

snapshot.forEach(doc => {

          this.objects[this.key] = {
            firstname: doc.id,
            lastname: doc.data().lastname,
            age: doc.data().age
          }

          this.key=this.key+1;
        }

This results in the following when displayed in JSON:

console.log(JSON.stringify(this.objects));

// RESULT OF THE CONSOLE:

{
 "0":
    {
        "firstname":"james",
        "lastname":"bond",
        "age":"87"
    },

 "1":
    {
        "firstname":"alex",
        "lastname":"tali",
        "age":"59"
    }
 }

Now when i use:

console.log(this.objects[0].firstname);

// The Result displays:
james

Which is the correct behavior! However when trying to display the list in HTML using the *ngFor it is giving me the Error: Cannot find a differ supporting object.

Here is my code in Home.html HTML/IONIC:

    <ion-grid>
      <ion-row>
        <ion-col col-4>First Name</ion-col>
        <ion-col col-4>Last Name</ion-col>
        <ion-col col-4>Age</ion-col>
      </ion-row>
      <ion-row>
        <ion-col col-4 *ngFor="let firstname of objects; let i = index">{{ objects[i].firstname }}</ion-col>
        <ion-col col-4 *ngFor="let lastname of objects; let i = index">{{ objects[i].lastname }}</ion-col>
        <ion-col col-4 *ngFor="let age of objects; let i = index">{{ objects[i].age }}</ion-col>
      </ion-row>
    </ion-grid>

Any how I can implement the above correctly? logically it should be working just fine! as similar console.log gives a correct result. While doing a LOT of research i stumbled upon this topic: https://github.com/angular/angular/issues/6392

Which to be honest I'm nor sure if it fits my problem or not.

Thanks a lot!

Your first item is not an array, even if you name the keys 0-n. {} Is an object (not used in ngfor) and [] is an array (what you use in an ngfor). — Z. Bagley
– Z. Bagley, Commented Nov 10, 2017 at 19:48

Sajeetharan · Accepted Answer · 2017-11-10 19:45:16Z

2

As the error says objects should be an array of objects, according to your JSON its an object of objects. you need to have proper JSON array, or convert to array of objects.

console.log(JSON.stringify(this.global.objects));

answered Nov 10, 2017 at 19:45

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

JamesAnd Over a year ago

How is it possible to convert it to to array of objects?

Sajeetharan Over a year ago

check here stackoverflow.com/questions/39360863/…

BeetleJuice Over a year ago

@JamesAnd: do this.objects = Object.values(this.objects);

BeetleJuice Over a year ago

@Sajeetharan Angular compiled by Typescript includes es6 polyfills no? I've just tested in on Firefox and it worked. Actually, according to Mozilla Docs, it works on versions of Chrome, Edge, Firefox, Opera and Safai

JamesAnd Over a year ago

I'm testing it directly on android using ionic cordova run android

|

Collectives™ on Stack Overflow

Angular *ngFor Array of Objects returning [ERROR: Cannot find a differ supporting object]

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related