Angular - Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

0
votes

This Angular Code doesn't let me display array . The error in console displays "Error trying to diff '[object Object]'" My component.ts :

sprints : Sprint[] = [];

ngOnInit() : void {
    this.sprintService.getSprints().subscribe(
      data =>
      {
          console.log(data);
          this.sprints = data as any;
      }
    );
  }
```
this is html code :

```

<div *ngFor="let sprint of sprints">
    {{sprint.codeSprint}}
    {{sprint.title}}
  </div>
```

I got this error :

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed at DefaultIterableDiffer.diff (core.js:26690)

When i logged I got the array but it deosn't diplay in html page
Thanks in advance !
2
angular
Can you provide the exact data that you see in the logging? Also why do you use data as any? Why the any? - Silvermind
@Silvermind {code: 3, message: null, objet: Array(20)} code: 3 message: null objet: (20) [Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4)] proto: Object - Sarah
Can't you just assign data to your sprint array? What's the purpose of using data as any? - Kirubel
sorry I forgot it there, because before i was using my sprints arrays like this : sprints : any[] = []; - Sarah
So data is not an array, but data.objet is. Do you understand what to do now? - Silvermind

2 Answers

0
votes

that object having array of arrays

<div *ngFor="let sprint of sprints">
   <div *ngFor="let spr of sprint">
      {{spr.codeSprint}}
      {{spr.title}}
   </div>
  </div>


ngOnInit() : void {
    this.sprintService.getSprints().subscribe(
      data =>
      {
          console.log(data);
          this.sprints = data.object;
      }
    );
  }
0
votes

*ngFor expects only iterable variables or arrays.

You can simply assign data to your sprints variable

......
data =>
  {
      console.log(data);
      this.sprints = data.objet;
  }

No need to use data as any.

If you want to use your Sprint[] model tho

....
(data: Sprint[]) => {
   this.sprints = data.objet;
}