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

Question

Here is the code below:

component.ts

by selecting match geting id in routing, then taking this id from URL

export class MatchComponent implements OnInit {
_postArrayMatch: match[];

 constructor(public router:Router, private matchService: MatchService, 
 private route: ActivatedRoute) {}

 ngOnInit(){
 this.getMatchId();
 }

 getMatchId() :void {
 this.route.params.forEach((params: Params)=> {
  let id = +params['id'];



  this.matchService.getMatch(id).subscribe(
    resultArray => this._postArrayMatch = resultArray,
    error => console.log("Error ::" + error))
  })
 }

component.html

just basic interpolation by doing ngFor loop

 <div *ngFor="let post of _postArrayMatch">
 <p>{{post.team1.name}}</p>
 </div>

service.ts

passing the dynamic id

 getMatch(id:number): Observable<match[]>{
    return this.http.get<match[]>(`http://localhost:3000/match/${id}`)
    }

interface

   export interface match{
     team1:{
      name:string,
      id:number
     }
     team2:{
      name:string,
      id:number
     }
   }

So what is the question? It sounds like you know what you need to do, change your export interface to be something like `[{team: string, name: string, id: number},{...}]` and then in your html do `
{{post.name}}
`. Also, in your foreach you may want to do _postArrayMatch.push() — rhavelka, Jun 08 '18 at 20:37
it doesnt work like that, the thing is i receive an object array from api, how do i transform objects to array? so that i could do the ngFor loop — Dovydas, Jun 11 '18 at 10:37
first get the keys by doing `const keys = Object.keys(this._postArrayMatch)`. Then push each object to an array `for(let i = 0; i < keys.length; i++) { newArr.push({this._postArrayMatch[keys[i]], team: keys[i])}`. Or you could alternatively use a pipe as explained [here](https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) — rhavelka, Jun 11 '18 at 14:43
i am not sure how to use it my case, in my solution, do i have to create new file or can i use in the same component? do i have to change in my getMatchId() method? — Dovydas, Jun 11 '18 at 16:15
i found away how to display data from object-
Team1: {{ _postArrayMatch.team1[post]}} — Dovydas, Jun 11 '18 at 17:41
not sure how to display only one property from object, i just need name without id — Dovydas, Jun 11 '18 at 17:43

score 0 · Answer 1 · answered Jun 11 '18 at 18:20

0

Thats seems the easiest way i could find on how to get the data from objects.

<div *ngFor="let post of objectKeys(_postArrayMatch.team1)">
  <div>  Team1: {{ _postArrayMatch.team1[post]}}</div>
</div>

component.ts

objectKeys = Object.keys;

answered Jun 11 '18 at 18:20

Dovydas

41
2
8

'easiest way' but how do you plan on showing team 2? or team 3? this is hard coded to be for only team 1. I can write a formal answer to show you what I mean – rhavelka Jun 11 '18 at 18:45
Apparently i just had to use the simple interpolation, no ngFor looping required https://stackoverflow.com/questions/50803811/angular-object-key-retrieve-get-only-one-property-from-object – Dovydas Jun 11 '18 at 18:52

rhavelka · Accepted Answer · 2018-06-11T21:56:42.400

Try something like this where you create the object in your response

component.ts

export class MatchComponent implements OnInit {
_postArrayMatch: match[];
newArr: Array<Object> = [];

 constructor(public router:Router, private matchService: MatchService, 
 private route: ActivatedRoute) {}

 ngOnInit(){
   this.getMatchId();
 }

 getMatchId() :void {
  this.route.params.forEach((params: Params)=> {
  let id = +params['id'];



  this.matchService.getMatch(id).subscribe(
    resultArray => {
      this._postArrayMatch = resultArray;
      const keys = Object.keys(this._postArrayMatch) // new stuff starts here
      for(let i = 0; i < keys.length; i++) { 
        newArr.push(this._postArrayMatch[keys[i]]);
        newArr[i]['team'] = keys[i];
      }
    },
    error => console.log("Error ::" + error))
  })
 }

And then you can access ALL of your sub objects in your html

Component.html

 <div *ngFor="let post of newArr">
  <p> {{post.team}}: {{post.name}}</p>
 </div>

Currently, with what you have you are hard coding for team 1, and if you want to do that then you shouldn't be using the *ngFor

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

component.ts

component.html

service.ts

2 Answers2