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

Question

• 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.

Answer 1

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  

Answer 2

Since Angular 6, there is now a keyvalue pipe operator. Simple do the following:

*ngFor="let item of objectList | keyvalue"  item.key # refers to the keys (134, 135...) in your example item.value # refers to the object for each key