CODEWITHSUNDEEP
angularapi
user12982041
user12982041

Reputation:

Problem in Getting Data From API in Angular

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>

Upvotes: 0

Views: 540

Answers (1)

Oussail
Oussail

Reputation: 2288

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);

Upvotes: 1

Related Questions