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) {
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.
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.servicename.get_or_post().subscribe(data=>
this.objectList = [data]);
Adding toArray() on the pipe worked for me.
// 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
toArray<theObject>()
);
}
