Typescript Convert Object to Array - because *ngFor does not supports iteration of object

Ankit Maheshwari picture Ankit Maheshwari · Jan 4, 2017 · Viewed 63.7k times · Source
  • I don't want to use for loop to convert Object to Array like this! If doubled the process and slow down the performance of app (I'm using Ionic2 and Typescript, with Firebase)

    for(let key in data) { array.push(value); }

Is there any solution to iterate object itself(shown in picture attached) using *ngFor.

Or I can convert this Object(shown in picture attached) to Array, so that can be iterable in *ngFor.

enter image description here

Answer

Farooq Ahmed Khan picture Farooq Ahmed Khan · Jan 4, 2017

You can use Object.keys(obj) to get named indexes. This will return an array structure which you can use/customize further. A sample use to iterate over object values may look like this

var persons = { 
    john: { age: 23, year:2010},
    jack: { age: 22, year:2011},
    jenny: { age: 21, year:2012}
}

Getting an iterator

var resultArray = Object.keys(persons).map(function(personNamedIndex){
    let person = persons[personNamedIndex];
    // do something with person
    return person;
});

// you have resultArray having iterated objects