How to read [object object] using *ngFor in angular2

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": "",
    "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": ""

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.

need help regarding that. Thanks!

Transform your data so that you do have an array property to iterate over. Keep most of the logic in the component code, not in the template.

1 Like

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

@lucasbasquerotto that is possible when we have an array of object, but in case of object of object it will not iterate. generate errors

Little hack for Objects of objects:

let keys = Object.keys(yourObject);

it produces an array of keys of your object
now you can loop over the keys with *ngFor

And access your stuff with:


@bengtler thanks for reply!

in my case let say Html is:

  <div *ngFor="let post of posts | keys"> <---- using keys pipe

        <ion-avatar item-left>
            <img  [src]="post[mykeys].data.picture.thumb.url">


.ts file

 this.posts = this.user_service.Get_User();
        let mykey = Object.keys(this.posts);

it still giving the error *ngFor support array of objects … what is wrong with this…

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';

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);


<div *ngFor="let key of keys">
            <img  [src]="posts[key].data.picture.thumb.url">

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.

i think we need to transform data because server is returning object of object. let me try what you suggest in above code. Thanks!

this is not working for me I dont know where I am doning wrong
this is ts code

export class HomePage {
  public images: any ;
  public imagesSrc :any ;

  //grid: Array<Array<string>>; 

  constructor(public navCtrl: NavController,public navParams: NavParams) {
    this.imagesSrc = ["../../assets/images/01.jpg", "../../assets/images/02.jpg", "../../assets/images/03.jpg"];


<ion-scroll *ngFor="let image of imagesSrc" [(ngModel)]="imagesSrc" direction="x" style="height:200px; min-height: 200px;">
      <a><img  src="image"/></a>

wt’s the error.

  <a><img  src={{image}}></a>

That image variable not getting read by html form do I have to keep this in brackets

the error is this http://localhost:8100/image 404 (Not Found)

error :No value accessor for form control with unspecified name attribute

Now why the same as before error “error :No value accessor for form control with unspecified name attribute” have declared object also

constructor(public navCtrl: NavController,public navParams: NavParams) {
    this.imagesSrc = ["../../assets/images/01.jpg", "../../assets/images/02.jpg", "../../assets/images/03.jpg"];
    for(let i=1;i<=this.imagesSrc.length;i++){


 <ion-scroll *ngFor="let image of images" [(ngModel)]="images" direction="x" style="height:200px; min-height: 200px;">
      <a><img  src="{{image}}"/></a>

not checked it …
access the key value
<a><img src={{image.src}}/></a>


 [code] <a><img  src="image.src"/></a>[/code]

same http://localhost:8100/image.src 404 (Not Found)

Uncaught (in promise): Error: No value accessor for form control with unspecified name attribute Error: No value accessor for form control with unspecified name attribute at d (http://localhost:8100/build/polyfills.js:3:3991) at _throwError (http://localhost:8100/build/main.js:22004:11) at setUpControl (http://localhost:8100/build/main.js:21917:9) at NgModel._setUpStandalone (http://localhost:8100/build/main.js:24486:9) at NgModel._setUpControl (http://localhost:8100/build/main.js:24472:37) at NgModel.ngOnChanges (http://localhost:8100/build/main.js:24403:18) at checkAndUpdateDirectiveInline (http://localhost:8100/build/main.js:11060:19) at checkAndUpdateNodeInline (http://localhost:8100/build/main.js:12442:17) at checkAndUpdateNode (http://localhost:8100/build/main.js:12410:16) at debugCheckAndUpdateNode (http://localhost:8100/build/main.js:13039:59) at debugCheckDirectivesFn (http://localhost:8100/build/main.js:12980:13) at Object.eval [as updateDirectives] (ng:///AppModule/HomePage.ngfactory.js:135:5) at Object.debugUpdateDirectives [as updateDirectives] (http://localhost:8100/build/main.js:12965:21) at checkAndUpdateView (http://localhost:8100/build/main.js:12377:14) at callViewAction (http://localhost:8100/build/main.js:12692:17)

Read this and make your forms accordingly. Did you even bother entering your error message into google?

hey my problem is solved have went through that tutorial and I first went to google only and checked a lot of forums but now solved
html code

  <ul class="images">
    <li class="list-images" *ngFor="let image of images">
       <!--<span class="badge">{{image.src}}</span>-->
      <a><img src= {{image.src}}/></a>

nice this is working for me

{“title”:"CarlsBerg ",“image”:“assets/beverages/carlsberg.jpg”,“totalBev”:20,“Remaning”:10}.

i have this object in my console, but iam not able to iterate and get the value in ion-card.

To me, “iterate” means “go through a sequence of things”. Can you explain how one would iterate when there is only one thing?

1 Like

sorry and thanks bro