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

Question

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

Based on the error message I understood, it's coming because I'm getting my API response as an object and trying to bind through array *ngFor.

I tried a few workarounds like an async pipe but that also didn't work.

Can someone help me with what mistake am I doing?

example.service.ts

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

@Injectable()
export class BitcoinService {
  constructor(private _httpClient: HttpClient) {}

  // API endpoint
  apiURL = 'https://api.coindesk.com/v1/bpi/currentprice.json';

  // Create method
  coinData(): Observable<any> {
    return this._httpClient.get<any>(this.apiURL);
  }
}

example.component.ts

import { Component, OnInit } from '@angular/core';
import { BitcoinService } from './bitcoin.service';

@Component({
  selector: 'app-bitcoin',
  templateUrl: './bitcoin.component.html',
  styleUrls: ['./bitcoin.component.css']
})
export class BitcoinComponent implements OnInit {
  // Define Property
  showData;

  // Inject Service
  constructor(private _bitcoinService: BitcoinService) {}

  ngOnInit() {
    // call the method
    this.getCoinData();
  }

  // Create Method
  getCoinData() {
    this._bitcoinService.coinData().subscribe(res => {
      console.log(res);
      this.showData = res;
    });
  }
}

example.component.html

<!-- Test The Result -->
<ul *ngFor="let data of showData">
  <li> {{data.disclaimer}} </li>>
</ul>

Error Message

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

stackblitz link for reference https://stackblitz.com/edit/angular-simple-api-get-call-1?file=src/app/observable-examples/example-1/bitcoin/bitcoin.component.ts

The data returned from the service is not an array. It might have a body with an array inside of it, but if you show some example of the real output, we might be able to help you further. — Silvermind
– Silvermind, Commented May 14, 2021 at 18:15
stackblitz.com/edit/angular-simple-api-get-call-1?file=src/app/… — Sandy
– Sandy, Commented May 14, 2021 at 18:46
I don't know if that call to the api works or not. I have not tested your Stackblitz. You should add the response to your question instead. — Silvermind
– Silvermind, Commented May 14, 2021 at 20:12

eko · Accepted Answer · 2021-05-14 19:31:05Z

2

You shouldn't subscribe and use the async pipe at the same time. They do the same thing.

Also you forgot to initialize your array.

showData: any[] = [];

Fixed stackblitz

answered May 14, 2021 at 19:31

eko

40.8k11 gold badges79 silver badges104 bronze badges

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

Comments

Felix · Accepted Answer · 2021-05-14 17:54:32Z

0

You can access your observable from your template. Like this:

example.component.ts

export class BitcoinComponent implements OnInit {
  showData: Observable<any>;

  constructor(private _bitcoinService: BitcoinService) {}

  ngOnInit() {
    this.showData = this._bitcoinService.coinData();
  }
}

example.component.html

<ul *ngFor="let data of showData | async">
  <li> {{data.disclaimer}} </li>>
</ul>

answered May 14, 2021 at 17:54

Felix

1,59612 silver badges13 bronze badges

Comments

Omkar Godse · Accepted Answer · 2021-05-14 17:56:44Z

0

Please define showData as array:

showData:any=[];

and store data like:

  getCoinData() {
this._bitcoinService.coinData().subscribe(res => {
  console.log(res);
  //this.showData = res;
  this.showData.push(res);
});

}

answered May 14, 2021 at 17:56

Omkar Godse

811 silver badge8 bronze badges

Comments

Steven Vaught · Accepted Answer · 2022-09-07 18:04:45Z

0

Not directly applicable to this scenario, but the question is highly visible for this error message, so this related solution might save someone some headache: Make sure you aren't trying to iterate over a template ref

I spent almost 30 minutes before I realized I had a #someArray in the template file as well as public someArray: Type[] = []; in the TypeScript file.

answered Sep 7, 2022 at 18:04

Steven Vaught

363 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related