0

I have Created an example for getting data from API "https://reqres.in/api/users". I have used services and Observable in my Example . I am Getting an Error"Error: Error trying to diff '[object Object]'.Only arrays and iterables are allowed"

Here is my Code.

employee.ts

export interface IEmployee{
id : number,
email : string,
first_name : string
}

employees.service.ts

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

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

private _url : string = "https://reqres.in/api/users";

constructor( private http : HttpClient ) { }

getEmployees(): Observable<IEmployee[]>{
 return this.http.get<IEmployee[]>(this._url); 
}  
}

employee-list.component.ts

import { EmployeesService } from './../employees.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

public employees = [];

constructor(private employeesService : EmployeesService) { }

ngOnInit() {
this.employeesService.getEmployees()
  .subscribe(data => this.employees = data);  
}
}

employee-list.component.ts

<h2>Employee List</h2>
<ul *ngFor = "let employee of employees">
 <li>{{employee.email}}</li>
</ul>
Improve this question
3
  • Can you share the response of the API? Commented Feb 28, 2020 at 22:50
  • I'm using this Open Api "reqres.in/api/users" , which contains {"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"[email protected]","first_name":"George","last_name":"Bluth"}, {"id":2,"email":"[email protected]","first_name":"Janet","last_name":"Weaver"}] } Commented Feb 29, 2020 at 15:23
  • The answer below is correct. I was behind a proxy and couldn't hit the API. The extraneous properties in the response are what is giving you trouble. Commented Feb 29, 2020 at 15:25

1 Answer 1

Reset to default
1

Before trying to cast your data with <IEmployee[]> You should get the data list first :

In employees.service.ts change your function getEmployees() :

getEmployees(): Observable<any>{
 return this.http.get<any>(this._url); 
}

Then in employee-list.component.ts you need to get data object list from the response.

ngOnInit() {
this.employeesService.getEmployees()
  .subscribe(response=> this.employees = response.data);  
}

Because this is how it looks the response : 

const response = {"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"email":"[email protected]","first_name":"George","last_name":"Bluth","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"},{"id":2,"email":"[email protected]","first_name":"Janet","last_name":"Weaver","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"},{"id":3,"email":"[email protected]","first_name":"Emma","last_name":"Wong","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"},{"id":4,"email":"[email protected]","first_name":"Eve","last_name":"Holt","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"},{"id":5,"email":"[email protected]","first_name":"Charles","last_name":"Morris","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"},{"id":6,"email":"[email protected]","first_name":"Tracey","last_name":"Ramos","avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"}]};

console.log(response.data);

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

2 Comments

Sorry for being late, i have update my answer i forget to change Observable<IEmployee[]> to Observable<any>
Nice well done, Don't forget to click on the check mark to mark this question as the correct anwser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.