Reputation: 4523
I want to iterate [object object] using *ngFor in Angular 2.
The problem is the object is not array of object but object of object which contains further objects.
{
"data": {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "03215110224",
"role": null,
"email": "[email protected]",
"picture": **{ <-- I want to get thumb: url but not able to fetch that**
"url": null,
"thumb": {
"url": null
}
},
"address": "Nishtar Colony",
"city_id": 2,
"provider": "email",
"uid": "[email protected]"
}
}
I know we can use pipe to iterate the object but how we can iterate further from object to object means data->picture->thum:url.
Upvotes: 109
Views: 193911
Reputation: 2212
Looping through object in Angular HTML templates
keyValuePipe is introduced in Angular: Please refer https://angular.io/api/common/KeyValuePipe
Quick code:
<p>Object</p>
<div *ngFor="let item of object | keyvalue">
{{item.key}}:{{item.value}}
</div>
<p>Map</p>
<div *ngFor="let item of map | keyvalue">
{{item.key}}:{{item.value}}
</div>
Upvotes: 13
Reputation: 31
After doing a lot of troubleshooting nested loops in the template, I found that this worked better for my use:
(For one thing I was trying to iterate agm-polygon and it wouldn't let me nest divs).
In component.ts:
Object = Object
values= Object.values(this.arrayOfObjects)
In component.html:
<div *ngFor='let value of values'>{{value.property}}</div>
Once you retrieve the values, you do have an Iterable, and do not need to worry about also iterating through the keys in the template, which can get complex and look messy.
Upvotes: 0
Reputation: 1635
I think the most elegant way to do that is to use the javascript Object.keys
like this (I had first implemented a pipe for that but for me, it just complicated my work unnecessary):
in the Component pass Object to template:
Object = Object;
then in the template:
<div *ngFor="let key of Object.keys(objs)">
my key: {{key}}
my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>
If you have a lot of subobjects you should create a component that will print the object for you. By printing the values and keys as you want and on an subobject calling itselfe recursively.
Hier you can find an stackblitz demo for both methods.
Upvotes: 59
Reputation: 658263
Angular 6.0.0
https://github.com/angular/angular/blob/master/CHANGELOG.md#610-2018-07-25
introduced a KeyValuePipe
See also https://angular.io/api/common/KeyValuePipe
@Component({ selector: 'keyvalue-pipe', template: `<span> <p>Object</p> <div *ngFor="let item of object | keyvalue"> {{item.key}}:{{item.value}} </div> <p>Map</p> <div *ngFor="let item of map | keyvalue"> {{item.key}}:{{item.value}} </div> </span>` }) export class KeyValuePipeComponent { object: {[key: number]: string} = {2: 'foo', 1: 'bar'}; map = new Map([[2, 'foo'], [1, 'bar']]); }
original
You can use a pipe
@Pipe({ name: 'keys', pure: false })
export class KeysPipe implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value)//.map(key => value[key]);
}
}
<div *ngFor="let key of objs | keys">
See also How to iterate object keys using *ngFor?
Upvotes: 210
Reputation: 9697
I know this question is already answered but I have one solution for this same.
You can also use Object.keys()
inside of *ngFor
to get required result.
I have created a demo on stackblitz. I hope this will help/guide to you/others.
CODE SNIPPET
HTML Code
<div *ngFor="let key of Object.keys(myObj)">
<p>Key-> {{key}} and value is -> {{myObj[key]}}</p>
</div>
.ts file code
Object = Object;
myObj = {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "1234567890",
"role": null,
"email": "[email protected]",
"picture": {
"url": null,
"thumb": {
"url": null
}
},
"address": "XYZ Colony",
"city_id": 2,
"provider": "email",
"uid": "[email protected]"
}
Upvotes: 17
Reputation: 2395
Angular now has a type of iterate Object for exactly this scenario, called a Set. It fit my needs when I found this question searching. You create the set, "add" to it like you'd "push" to an array, and drop it in an ngFor just like an array. No pipes or anything.
this.myObjList = new Set();
...
this.myObjList.add(obj);
...
<ul>
<li *ngFor="let object of myObjList">
{{object}}
</li>
</ul>
Upvotes: 2
Reputation: 2455
1.Create a custom pipe to get keys.
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'keys'
})
export class KeysPipe implements PipeTransform {
transform(value: any, args?: any): any {
return Object.keys(value);
}
}
- In angular template file, you can use *ngFor and iterate over your object object
<div class ="test" *ngFor="let key of Obj | keys">
{{key}}
{{Obj[key].property}
<div>
Upvotes: 5
Reputation: 1377
i would do this:
<li *ngFor="let item of data" (click)='onclick(item)'>{{item.picture.url}}</li>
Upvotes: -9
Reputation: 1
If you are using a map()
operator on your response,you could maybe chain a toArray()
operator to it...then you should be able to iterate through newly created array...at least that worked for me :)
Upvotes: 0
Reputation: 5532
You have to create custom pipe.
import { Injectable, Pipe } from '@angular/core';
@Pipe({
name: 'keyobject'
})
@Injectable()
export class Keyobject {
transform(value, args:string[]):any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}}
And then use it in your *ngFor
*ngFor="let item of data | keyobject"
Upvotes: 12