*ngFor="let hero of usersList" Error trying to diff. Only arrays and iterables are allowed

Question

I'm traying to understand why I cannot see in the html using ngFor all the users and there components in a table. It's seams that retain in usersList: User[] the response that is an array list of type User as in the next image PtrSCr of the Web page and the console error but in the end it say that Error: Error trying to diff '[{"id":101,"userName":"tcorneanu","password":"password","email":"tcorneanu@gmail.com"},{"id":104,"userName":"user3","password":"pwd3","email":"user3@gmail.com"}]'. Only arrays and iterables are allowed HTML

<h2>User list</h2>
{{usersList}}
<table class="table table-striped">
 <thead>
     <tr>
        <th>Id</th>
        <th>index</th>
     </tr>
 </thead>
 <tbody>
    <tr *ngFor="let hero of usersList; let i = index">
        <td>{{hero.id}}</td>
        <td>{{i}}</td>
    </tr>
</tbody>
</table>

TS

usersList: User[] = [];  

 private getUsersList(token:any):void{
    this.userService.getUsersList(token).subscribe(data => {
      console.log("data is: "+data),
      this.usersList = data
    }, (error) => {
      console.log(error);
    });
  }

userService

getUsersList(token:any): Observable<User[]>{
    let tokenStr = 'Bearer '+token;
    const headers = new HttpHeaders().set("Authorization",tokenStr);
    return this.httpClient.get<User[]>(`${this.url}/users`,{headers, responseType: 'text' as 'json'});
  }

User

export interface  User {
    id: number;
    userName: string;
    password: string;
    email: string;
}

Does this answer your question? [Angular4 Error trying to diff '\[object Object\]'](https://stackoverflow.com/questions/44574249/angular4-error-trying-to-diff-object-object) — Beshambher Chaukhwan, Jun 11 '21 at 10:53
Did you check the `typeof data` ? Maybe its Response object and you are required to get the user array by using `data.json()` — Beshambher Chaukhwan, Jun 11 '21 at 10:56
@Kenny check his image url. He is getting plain string data of user array — Beshambher Chaukhwan, Jun 11 '21 at 10:56
@Kenny data is: [{"id":101,"userName":"tcorneanu","password":"password","email":"tcorneanu@gmail.com"},{"id":102,"userName":"user1","password":"pwd1","email":"user1@gmail.com"},{"id":103,"userName":"user2","password":"pwd2","email":"user2@gmail.com"},{"id":104,"userName":"user3","password":"pwd3","email":"user3@gmail.com"}] — Tiberiu Corneanu, Jun 11 '21 at 11:00
@BeshambherChaukhwan console.log(typeof this.data) I see string in the console but I don't understand why because it should be of type User[] — Tiberiu Corneanu, Jun 11 '21 at 11:01
in the same time if I try to do for example data.split('') it will tell me that Property 'split' does not exist on type 'User[]'. — Tiberiu Corneanu, Jun 11 '21 at 11:09
I think `responseType` is unnecessary in userService because it seems that the response is being interpreted as a plain string instead of User[] array. Did you check the imports and proper usage of HttpClient? — Beshambher Chaukhwan, Jun 11 '21 at 11:13
[Andular documentation](https://angular.io/tutorial/toh-pt6) /** GET heroes from the server */ getHeroes(): Observable { return this.http.get(this.heroesUrl) } — Tiberiu Corneanu, Jun 11 '21 at 11:20

score 0 · Accepted Answer · answered Jun 11 '21 at 11:35

I converted the string to User[] array

 private getUsersList(token:any):void{
    this.userService.getUsersList(token).subscribe(data => {
      console.log("data is: " +data+ typeof data),
      console.log("usersList type is: " +typeof this.usersList),
      this.string = data.toString(),
      console.log("string is of type "+typeof this.string+", value is "+this.string)
      this.array = JSON.parse(this.string);
    }, (error) => {
      console.log(error);
    });
  }

now if I go to the HTML {{array}} I will see -> [object Object],[object Object],[object Object],[object Object]

and table will show the table Web Page and console in the end

<table class="table table-striped">
 <thead>
     <tr>
        <th>Id</th>
        <th>index</th>
     </tr>
 </thead>
 <tbody>
    <tr *ngFor="let hero of array">
        <td>{{hero.userName}}</td>
        <td>{{hero.email}}</td>
    </tr>
</tbody>
</table>

*ngFor="let hero of usersList" Error trying to diff. Only arrays and iterables are allowed

1 Answers1