how to render data using ngFor received throug http service?

Question

I tried to inject a service(contact.service.ts) into a component(contact-list.component) The service(or data) that i m trying to provide to component is details of employees(defined in contacts.ts). I successfully received the data,but not able to render it using ngFor

---------contacts.ts---------------

export interface Contacts {
  contactsList: Contact[];
}

export interface Contact {
  id: number;
  name: string;
  city: string;
}

------------contact.service.ts-----------

import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Contacts } from '../models/contacts';

// @Injectable({
//   providedIn: 'root'
// })

export class ContactService {
  url = 'http://www.mocky.io/v2/5c5d880f3200000e11220880';

  constructor(
    private http: HttpClient
  ) { }

  getContacts(): Observable<Contacts> {
    // make http request to the given url and fetch the contacts
   // return of({contactsList: []});
    return this.http.get<Contacts>(this.url);
  }
}

-----------contact-list.component--------------

import { ContactService } from 'src/app/services/contact.service';
import { Contacts } from 'src/app/models/contacts';

@Component({
  selector: 'app-contact-list',
  templateUrl: './contact-list.component.html',
  styleUrls: ['./contact-list.component.css']
})
export class ContactListComponent implements OnInit {

  contacts;
  constructor(
    private _contactService: ContactService
  ) { }

  ngOnInit() {
      this._contactService.getContacts()
    .subscribe(data => this.contacts=data);

  }

}

Here is what i tried to render it

<p class="title"> Contact Applications </p>
<div class="list">
  <p *ngFor="let contact of contacts">
    {{contact.name}}
  </p>
</div>

and resulted with this error

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

score 0 · Answer 1 · answered Oct 01 '19 at 12:47

0

Like below:

<div *ngFor="let contact of contacts;let i = index;">
     {{contact.[field_name]}}
</div>

But I think we need to check the data. Please console.log(this.contacts) and show it

answered Oct 01 '19 at 12:47

JohnPatch

11
1

here is a [link](http://www.mocky.io/v2/5c5d880f3200000e11220880) to data – bali Oct 01 '19 at 13:03

score 0 · Accepted Answer · answered Oct 01 '19 at 12:52

0

Look at the data coming from the API: it's not an array, it's an object containing an array. Therefore you should

this._contactService.getContacts()
    .subscribe(data => this.contacts = data.contactsList);

answered Oct 01 '19 at 12:52

mbojko

13,503
1
16
26

score 0 · Answer 3 · answered Oct 01 '19 at 13:34

0

I cant see what type of variable contacts is in your component and you are trying to access it as type Contact in your template. So may be try below

export class ContactListComponent implements OnInit {

  contacts : Contacts; // declaring contacts as Contacts type will enable accessing its properties

answered Oct 01 '19 at 13:34

RR1112

226
1
9

Have a look at the contact.service.ts observable object is type casted to Contacts and when contacts from component property is assigned to it,it will know the type of value assigning to it, thats what the power of typescript – bali Oct 02 '19 at 06:32

score 0 · Answer 4 · answered Oct 01 '19 at 14:15

In your ContactListComponent declare:

contacts: Contacts;

and in your page:

<p *ngFor="let contact of contacts.contactsList">
    {{contact.name}}
</p>

Anyways, you can still refactor the code to use Contact[], you are not obliged to use Contacts interface

how to render data using ngFor received throug http service?

4 Answers4