CODEWITHSUNDEEP
angular
SHO
SHO

Reputation: 11

The problem is ngfor only supports binding to Iterables such as Arrays

I was trying to consume an api to angular but gettting stuck. Would you like to help me out ? The code as follows.

Other

HTML:

<div *ngFor="let data of contact">
    <h1>  {{data.ConDepartment}} </h1>
    <h1>  </h1>
</div>

service:

 getContact(){

  //  return this.http.get('https://localhost:44310/api/contacts/getcontact');
    return this.http.get('https://localhost:44310/api/contacts/getcontact').map(res => res );
}

TS:

contact:{}
//  user:{}


  constructor(private service:ContactService) { }

  ngOnInit() {

   this.service. getContact().subscribe(res=>{
    this.contact=res;

//   this.service.getUsers().subscribe(res=>{
// this.user=res;


console.log(res);
   }  );

JSON:

//localhost:44310/api/contacts/getcontact

{
  "ConId": 1,
  "ConCcrId": null,
  "ConCtrId": null,
  "ConForename": "SUPER",
  "ConSurname": "USER",
  "ConDepartment": null,
  "ConDivision": null,
  "ConJobtitle": "SUPER_USER",
  "ConGender": " ",
}

I want to display the json data in html. Please let me know if you help me out. Also, I was trying another fake API and it was working.

Upvotes: 0

Views: 42

Answers (1)

wentjun
wentjun

Reputation: 42516

As you mentioned, the response from the API is an object, not an array. If you are trying to iterate through the properties of the array on the *ngFor and display it on your view, you can use the keyvalue pipe instead.

<div *ngFor="let data of contact | keyvalue">
  {{item.key}: {{item.value}}
</div>

Upvotes: 2

Related Questions