I want to iterate [object object] using *ngFor in angular2, the problem is the object is not array of object but object of object which contains further objects.
{ <-- this is an array of object
"data": {
"id": 834,
"first_name": "GS",
"last_name": "Shahid",
"phone": "03215110224",
"role": null,
"email": "test@example.com",
"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": "test@example.com"
}
}
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.
@UmarRasheed If I understood correctly what you want, you can access with [your_object].data.picture.thumb.url. You can show your html to let me know what you are doing exactly.
Here and example how it could look like with angular 2, because i do not know the correct ionic2 syntax, yet.
You have to share the keys with your template --> so it must be a class member.
Then loop simply over the keys and access the current key of your object.
Component class
// import of the angular stuff
import { Component, OnInit } form '@angular/core';
// here is your import of the service
import { UserService } from 'your/user-service';
// you should type your data with interfaces
import { Post } from 'modal/post';
@Component({
...
})
class XXX implements OnInit {
posts: Post[];
keys: String[];
constructor(private user_service: UserService) {}
ngOnInit() {
this.posts = this.user_service.Get_User();
this.keys = Object.keys(this.posts);
}
}
Template
<div *ngFor="let key of keys">
<div>
<img [src]="posts[key].data.picture.thumb.url">
</div>
</div>
But all in all, i would change your api to respond correct data structures like arrays of it is a list… or transform your data to an array in your user-service.