CODEWITHSUNDEEP
angularangular7ngfor
Akshay Champavat
Akshay Champavat

Reputation: 57

Need Some help on data iteration through ngFor

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>

Upvotes: 1

Views: 75

Answers (4)

Shelly
Shelly

Reputation: 301

This might help you 

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

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

Upvotes: 1

Maniraj Murugan
Maniraj Murugan

Reputation: 9084

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..

Upvotes: 1

Arpit Kumar
Arpit Kumar

Reputation: 2249

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.

Upvotes: 2

Adrita Sharma
Adrita Sharma

Reputation: 22213

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

Upvotes: 1

Related Questions