Angular 6 Http Observable of JSON (array object into object) - *ngFor does not work

Question

I was looking for any good solution of my problem, but did not find anything correct. If my problem is a duplicate I have to be blind... and sorry for that.

So I have a little task to do which is not hard because I did it with API which I had before.

Example:

[{"id":1,"first_name":"Abdul","last_name":"Isakov",},
{"id":1,"first_name":"Abdul","last_name":"Isakov",}]

But now I am working with little different API, which makes me a problem to displaying the list of users.

I have to display a list of users with Angular 6 using an API which you can find below.

https://reqres.in/api/users?page=2

example:

{"page":2,"per_page":3,"total":12,"total_pages":4,"data": 
[{"id":4,"first_name":"Eve","last_name":"Holt"}, 
{"id":5,"first_name":"Charles","last_name":"Morris"]}

As you see here I have something like that

{ number, number, number, number, array[]}

The main problem is that I can not use ngFor to display information about users from "data". This the main quest which I have to do...

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

I was working with https://angular.io/api but there is an easier way to display the list.

My code below:

user.ts

export interface User {
  page: number,
  per_page: number,
  total: number,
  total_pages: number,
  data: Array<any>
}

users.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UsersService {

  readonly urlApi = 'https://reqres.in/api/users?page=2';
  users: Observable<User[]>;
  constructor(private http: HttpClient) { }
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.urlApi);
  }
}

users.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../user';
import { UsersService } from '../../users.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})

export class UsersComponent implements OnInit {
  users: User[];
  constructor(private usersService: UsersService) { }
  ngOnInit() {
    this.getUsers();
    console.log(this.users);
  }
  getUsers(): void {
    this.usersService.getUsers()
      .subscribe(users => console.log(this.users = users));
  }
}

and the last: users.component.html

<div class="container text-center">
<div class="users">
    <div class="row">
        <h2 class="col-12 users__title">Users List</h2>
    </div>
    <div class="row">
        <ul class="col-12 users__form">
                <li class="list-group-item" *ngFor="let user of users">
                    <div class="row">
                        <div class="col-6">
                            <img class="users_form--image">
                        </div>
                        <div class="col-6 users__form__information">
                            <p>{{user.data}}</p>
                        </div>
                    </div>
                </li>
        </ul>
    </div>
</div>
</div>

I need to make another variable which could store objects of "data or something like that.

Sorry for spam. Thank you for helping!

in your html, try *ngFor="let item of users.data" and <p>{{item.first_name}}</p>. — rhavelka
– rhavelka, Commented Oct 8, 2018 at 22:15
I have tried it before. *ngFor="let user of users.data" error: "Identifier 'data' is not defined. 'Array' does not contain such a member" this is funny... it works but still i see errors in console — Piotr Gudalewicz
– Piotr Gudalewicz, Commented Oct 8, 2018 at 22:18
Please note that in English, the word I must be upper case when referring to yourself. I took the liberty of editing, but just a reminder for the future. — Heretic Monkey
– Heretic Monkey, Commented Oct 8, 2018 at 22:48
ok, if you are getting an error but it is still working, then I am guessing users.data is undefined.undefined which should give an error. Then in the html it throws the error until it is populated. Phix's answer solves that problem but removing a possible undefined of undefined reference. — rhavelka
– rhavelka, Commented Oct 9, 2018 at 13:23

Phix · Accepted Answer · 2018-10-08 22:13:58Z

1

The array you want is in the result's data property, so you'll need to iterate over that or just assign right away:

getUsers(): void {
  this.usersService.getUsers()
    .subscribe(result => this.users = result.data);
}

answered Oct 8, 2018 at 22:13

Phix

10.1k4 gold badges39 silver badges65 bronze badges

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

1 Comment

Piotr Gudalewicz Over a year ago

Yep it works. I have an error in IDE but it works correctly in the browser. Thanks so much!

Abel Valdez · Accepted Answer · 2018-10-08 22:16:57Z

0

Use a map to extract the propertie DATA from your API

getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.urlApi).pipe(map(res => {return res['data']}));
}

answered Oct 8, 2018 at 22:16

Abel Valdez

2,4081 gold badge19 silver badges34 bronze badges

Comments

stalkert · Accepted Answer · 2018-10-11 08:05:49Z

0

You should change interface

export interface User { id: name, first_name: string, last_name: string }

export interface Entity { page: number, per_page: number, total: number, total_pages: number, data: Array<User> }

getUsers(): Observable<User[]> { return this.http.get<Entity>(this.urlApi) .pipe(map(({data}) => data); }

edited Oct 11, 2018 at 8:05

answered Oct 8, 2018 at 22:35

stalkert

264 bronze badges

3 Comments

Piotr Gudalewicz Over a year ago

your and Phix way is correct. The problem is solved. Thank you for your time.

Piotr Gudalewicz Over a year ago

There is a small problem. This way is working, application in the browser works fune, but i can not build --prod because of: error TS2459: Type 'User[]' has no property 'data' and no string index signature. any sugestion ?

stalkert Over a year ago

Try to change type from User[] to Entity in get<> section getUsers(): Observable<User[]> { return this.http.get<Entity>(this.urlApi) .pipe(map(({data}) => data); }

Collectives™ on Stack Overflow

Angular 6 Http Observable of JSON (array object into object) - *ngFor does not work

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related