Need Some help on data iteration through ngFor

Question

I am new to angular, I am calling rest api and getting response back successfully but I am not able to iterate that response by ngFor in my html file .

This is my component.ts file

import { Component, OnInit } from '@angular/core';
import { UserService } from '../services/reg.service';

@Component({
    selector: '<app-users>',
    templateUrl: 'users.component.html'
})
export class UsersComponent implements OnInit {


    users: any = {};
    constructor(
        private userService: UserService
        ) { }

        ngOnInit() {
            this.userService.getUserList().subscribe(

            data => {
                this.users = data['data'];

                    // data is in below structure
                   /* {
                    status: "Data found",
                    data: {
                         1: {
                             id: "1",
                             username: "aksahy",
                             gender: "male"
                            },
                         2: {
                             id: "2",
                             username: "anand",
                             gender: "male"
                            }
                         }
                    } */
                console.log(this.users);
            },
            error => {
                console.log(error);
            }
        );
    }
}

This is my component.html file .

<div class="container">

    <li *ngFor='let userlist of users'>
            {{ userlist.gender}}

    </li>
</div>

console is showinf'[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. — Akshay Champavat, May 24 '19 at 06:25

score 2 · Accepted Answer · answered May 24 '19 at 06:25

2

Just add this line

this.users = Object.values(data['data']); // remove this.users = data['data'];

Reason: You have object of objects but *ngFor accepts array of objects.

answered May 24 '19 at 06:25

Arpit Kumar

2,179
5
28
53

Thanks @arpit , it works for me .but not getting exact idea why you wrote this and what its impact. – Akshay Champavat May 24 '19 at 06:30
You can refer @Adrita Sharma's answer below, we have changed the format of response, from object of objects to array of objects. Reference: https://stackoverflow.com/questions/26795643/how-to-convert-object-containing-objects-into-array-of-objects – Arpit Kumar May 24 '19 at 06:32

score 1 · Answer 2 · answered May 24 '19 at 06:23

The data structure you displayed is an object of objects

data: {
      1: {
        id: "1",
          username: "aksahy",
            gender: "male"
      },
      2: {
        id: "2",
          username: "anand",
            gender: "male"
      }
    }

To iterate, it should be an array of objects. Like this:

data: [
  1: {
    id: "1",
    username: "aksahy",
    gender: "male"
  },
  2: {
    id: "2",
    username: "anand",
    gender: "male"
  }
]

You need to modify response in array format

I am recieving json object from server, its simple in php like json_encode (resArray,true) — Akshay Champavat, May 24 '19 at 06:28

score 1 · Answer 3 · answered May 24 '19 at 06:44

I would like to propose a solution without changing the data comes from response,

Just change your HTML like,

<div class="container">
    <li *ngFor='let userlist of users | keyvalue'>
      <span *ngFor='let user of userlist.value | keyvalue'>
        {{ user.key }} : {{ user.value }}
      </span>
    </li>
</div>

Working Example: https://stackblitz.com/edit/angular-qzxodp

Here i have used keyvalue pipe which used to iterate objects..

score 1 · Answer 4 · answered May 24 '19 at 09:18

This might help you

ngOnInit() {
        this.userService.getUserList().subscribe(
        (data:any) => {

           this.users = data.data;
           console.log(this.users);
        },
        error => {
            console.log(error);
        }
    );
}

Need Some help on data iteration through ngFor

4 Answers4