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

Question

I'm creating an Angular app which shows list of projects and list of users from postgresql database, but I'm having issues with showing list of users in html. The problem is that Angular is considering my array as an object no matter what I do. The same code worked for projects but didn't work for users.

This is my service:

    import { environment } from "../../../environments/environment";
    import { Observable } from 'rxjs';
    import { Projet } from '../modele/projet.model';
    import { Test } from '../modele/test.model';
    import { HttpParams,HttpClient } from "@angular/common/http";
    import { Injectable } from "@angular/core";
    import { map } from 'rxjs/operators';
    import { User } from '../modele/user.model';
    import { Financement } from '../modele/financement.model';
        
    @Injectable()
    export class WebService {
            
        constructor(private httpClient: HttpClient) { }
            
        serverUrl: string = "http://localhost:8080/"
              
        get(url: string): Observable<any> {
            return this.httpClient.get(this.serverUrl + url);
        }
    }

The component :

    import { Component, OnInit } from '@angular/core';
    import { User } from '../../shared/modele/user.model';
    import { Router } from '@angular/router';
    import { WebService } from '../../shared/sevices/web.service';
    import { FormGroup, FormBuilder, FormControl, Validators, Form } from '@angular/forms';
    
    @Component({
      selector: 'app-show-users',
      templateUrl: './show-users.component.html',
      styleUrls: ['./show-users.component.scss']
    })

    export class ShowUsersComponent implements OnInit {
    
        ngOnInit(): void {
          this.getData();
        }
        usersList: Array<User>
        user: User 
        myForm: FormGroup;
      
        constructor(private webService: WebService, private formBuilder: FormBuilder,private router: Router) { }
      
        getData(): void {
          this.webService.get("showUsers").subscribe(res => {
            let response = JSON.parse(JSON.stringify(res))
            this.usersList = response.data
      
          })
        }
      }

The html :

        <tr *ngFor="let user of usersList">
            <td>{{user.name}}</td>            
            <td>{{user.username}}</td>
            <td>{{user.email}}</td>
        </tr>

This is the server response : server response

NB: the EXACT same code worked for the object PROJECT

Could you please post the response that you are getting from the rest call ? It seems like there is issue with that only. — Harmandeep Singh Kalsi
– Harmandeep Singh Kalsi, Commented Jun 26, 2020 at 19:02
why do you JSON.stringify then JSON.parse on the same object on the same line — cvb
– cvb, Commented Jun 26, 2020 at 19:18
Don't forget to accept and upvote answers that helped you out >_> — Robin De Schepper
– Robin De Schepper, Commented Jun 26, 2020 at 20:13

Robin De Schepper · Accepted Answer · 2020-06-26 20:11:57Z

3

You need to make sure that the variable you pass into *ngFor is an array. You can make sure of this with Array.from(v) and can also strip any keys of an Object that might be sent from the serverside with Object.values(v):

this.webService.get("showUsers").subscribe(res => {
  this.usersList = Array.from(Object.values(res.data.body.data));
})

edited Jun 26, 2020 at 20:11

answered Jun 26, 2020 at 19:52

Robin De Schepper

6,5245 gold badges44 silver badges66 bronze badges

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

9 Comments

firas1 Over a year ago

the variable this.usersList is already declared Array

Robin De Schepper Over a year ago

Doesn't matter what type you declare it as, you still need to sanitize the actual data you receive. TypeScript types are just compile-time checks. There can be only 1 reason why Angular says that it can't do ngFor on an object: because it is an object and not an array :p

Robin De Schepper Over a year ago

I've had this error a couple of times myself, even when the data looked like it was an array in every possible way. Give it a try ;)

firas1 Over a year ago

it gives me this error ERROR TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) at Function.from (<anonymous>)

Robin De Schepper Over a year ago

Oh, uhm you're probably not setting the value of this.usersList first, my answer might be a bit confusing, I will update

|

8888 · Accepted Answer · 2022-01-14 09:42:14Z

1

In my case, I have a simple approach, but I spent a lot of time. You could try this:

datas: any;

this.token = JSON.parse(window.localStorage.getItem('token'));

this.authService.getData(this.token.id).subscribe(data => { 
    this.datas = data;  
})

In the HTML template just use this.datas.id, this.datas.username instead of an *ngFor

edited Jan 14, 2022 at 9:42

8888

2,1042 gold badges18 silver badges34 bronze badges

answered Jan 13, 2022 at 16:33

P T

112 bronze badges

Comments

Ali Adravi · Accepted Answer · 2020-06-26 19:33:36Z

0

You don't need this code:

let response = JSON.parse(JSON.stringify(res))
this.usersList = response.data

simply use:

this.userlist = res

Youe complete method:

this.webService.get("showUsers").subscribe(res => {
  this.userlist = res
});

answered Jun 26, 2020 at 19:33

Ali Adravi

23k9 gold badges93 silver badges97 bronze badges

1 Comment

firas1 Over a year ago

still same problem , Angular is still considering my array as an object

Collectives™ on Stack Overflow

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

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related