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


#1

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.

need help regarding that. Thanks!


#2

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.


#3

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


#4

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


#5

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:

yourObject[key].data.picture.thumb.url

#6

@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">
        </ion-avatar>

</div>

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


#7

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.


#8

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


#9

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.images=[];
    this.imagesSrc = ["../../assets/images/01.jpg", "../../assets/images/02.jpg", "../../assets/images/03.jpg"];
  }
}

html

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

#10

wt’s the error.

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

#11

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


#12

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.images=[];
    this.imagesSrc = ["../../assets/images/01.jpg", "../../assets/images/02.jpg", "../../assets/images/03.jpg"];
    for(let i=1;i<=this.imagesSrc.length;i++){
      this.images.push({"src":this.imagesSrc[i]});
    }
  }

html

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

#13

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

or

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

#14

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)


#15

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


#16

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>
    </li>
    </ul>

#17

nice this is working for me