Angular 2 getting json data with ngfor

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: "http://life.optomeda.lt/?p=168"} 1 : {rendered: "http://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, Jul 11 '18 at 07:15
Angular **can't** loop an Object, ngFor supports iterables only, you need to provide an array. — briosheje, Jul 11 '18 at 07:16
But As I sent now, you can see from console it's two arrays. Name and link are arrays. — Angulandy2, Jul 11 '18 at 07:17
`straip = {} as straipsnelis` this should be `straip:straipsnelis[];` — Rahul Patil, Jul 11 '18 at 07:19

Akj · Accepted Answer · 2018-07-11T07:39:19.000

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 '18 at 07:39

answered Jul 11 '18 at 07:22

Akj

7,038
3
28
40

I get [object object] in html. No console error now. – Angulandy2 Jul 11 '18 at 07:25

Angular 2 getting json data with ngfor

1 Answers1