Angular 2 getting json data with ngfor [duplicate]

Question

I got a JSON array in URL and I am trying to get information from it so I could use it in ngFor. What am I doing wrong if I want to get link or name and use it in ngFor? Because I get it in console.log(this.straip), but cannot use it in ngFor.

Component.ts

export interface straipsnelis {
  name: string;
  link: string;
}

straip = {} as straipsnelis;
ngOnInit() {
  this.http.get('this.url').subscribe((data:any) => {
    this.straip.link = data.map((a:any)=>a.guid);
    this.straip.name = data.map((a:any)=>a.slug);
    console.log(this.straip);
  })
}

HTML

<div *ngFor="let s of straip" class="cardukas">
  <div class="left-photo">{{s.link}}</div>
  <div class="right-info"></div>
</div>

Console error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

{link: Array(2), name: Array(2)} link : Array(2) 0 : {rendered: "life.optomeda.lt/?p=168"} 1 : {rendered: "life.optomeda.lt/?p=1"} length : 2 proto : Array(0) name : Array(2) 0 : "h1-post-name-lorem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit" 1 : "pirmasis-tinklarascio-irasas" length : 2 proto : Array(0) proto : Object — Angulandy2
– Angulandy2, Commented Jul 11, 2018 at 7:15
Angular can't loop an Object, ngFor supports iterables only, you need to provide an array. — briosheje
– briosheje, Commented Jul 11, 2018 at 7:16

Akj · Accepted Answer · 2018-07-11 07:39:19Z

2

ngFor does not iterate on objects , it iterates on array only.

TS:

export interface straipsnelis {
  name: string;
  link: string;
}

straip = {} as straipsnelis;

straipArray : Array<any> = []; 

ngOnInit() {
  this.http.get('this.url').subscribe((data:any) => {
    this.straip.link = data.map((a:any)=>a.guid);
    this.straip.name = data.map((a:any)=>a.slug);
    this.straipArray.push(this.straip)

    console.log(this.straip);
  })
}

HTML:

<div *ngFor="let s of straipArray" class="cardukas">
  <div class="left-photo">{{s.link}}</div>
  <div class="right-info"></div>
</div>

edited Jul 11, 2018 at 7:39

answered Jul 11, 2018 at 7:22

Akj

7,2513 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Angulandy2 Over a year ago

I get [object object] in html. No console error now.

Collectives™ on Stack Overflow

Angular 2 getting json data with ngfor [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related