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

  • 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) {

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

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 

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

If you don’t need the indexes, you can use Object.values(yourObject) to get an array of the inner objects.

The stadard library funtion Object.entries does that for you. Documentation

Here’s an exemple of using Object.entries in a function to convert an object of (key -> object of type A) to a list of object of type A with the property name and the key as the value of that name property:

function f<A>(input: { [s: string]: A }): (A & {name: string})[] {
  return Object.entries(input)
    .map(a => {
      return {name: a[0], ...a[1]}

Just put the response data inside a square bracket and save it in the class.

   this.objectList = [data]);

Adding toArray() on the pipe worked for me.

Read More:   Heroku: "No default language could be detected for this app" error thrown for node app

// Import toArray function
import { toArray } from 'rxjs/operators';

// Generic function to consume API
searchObjects(term: string): Observable<theObject[]> {
  requestUrl = this.url + term;
  return this.http.get<theObject[]>(requestUrl, httpOptions).pipe(
      // convert object to array

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts