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

Question

I'm making a get to an API in my Angular project and I get this JSON:

{
  "data": {
    "success": true,
    "historical": true,
    "date": "2022-01-01",
    "base": "MXN",
    "rates": {
      "COFFEE": 0.02158734144632395,
      "CORN": 0.008232645172711363,
      "COTTON": 0.04320921676820366,
      "SOYBEAN": 0.0036714622235960175,
      "SUGAR": 0.25680398615582695,
      "WHEAT": 0.00017592643558262669
    },
    "unit": "per bushel"
  }
}

But when I try to acces the data in my HTML i got the error Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays I tried with Object.key Object.value JSON.parse but still got the same error, any help on this?

This is my service file:

constructor(private http: HttpClient) { }

public getCommoditiesHistoricalMXN(): Observable<any>{
    return this.http.get<any>('https://www.commodities-api.com/api/' + this.enero + this.key + this.baseMXN + this.symbols)

This is my TS file:

granosHistorical: any = {};
constructor(private commoditiesS: CommoditiesService){}

ngOnInit(): void {

    this.commoditiesS.getCommoditiesHistoricalMXN().subscribe(resp => {
          this.granosHistorical = resp
          console.log(this.granosHistorical);
        });
    
    }

This is my HTML

<table class="table">
     <thead>
        <tr>
          <th scope="col">Mes</th>
          <th scope="col">MXN$/bu</th>
          <th scope="col">VAR</th>
        </tr>
     </thead>
     <tbody>
        <tr *ngFor="let granos of granosHistorical">
           <td>{{granos.date}}</td>
           <td>Price</td>
           <td>Var</td>
        </tr>
     </tbody>
</table>

Answer 1

You are receiving an Object in the response. The ngFor directive is only aplicable to arrays or iterables like the error messages say.

If you want to have more than one item in the data property of your response the payload of the response should look like this:

  {
    "data": [
        {
          "success": true,
          "historical": true,
          "date": "2022-01-01",
          "base": "MXN",
          "rates": {
            "COFFEE": 0.02158734144632395,
            "CORN": 0.008232645172711363,
            "COTTON": 0.04320921676820366,
            "SOYBEAN": 0.0036714622235960175,
            "SUGAR": 0.25680398615582695,
            "WHEAT": 0.00017592643558262669
        },

        {
          "success": true,
          "historical": true,
          "date": "2022-01-01",
          "base": "MXN",
          "rates": {
            "COFFEE": 0.02158734144632395,
            "CORN": 0.008232645172711363,
            "COTTON": 0.04320921676820366,
            "SOYBEAN": 0.0036714622235960175,
            "SUGAR": 0.25680398615582695,
            "WHEAT": 0.00017592643558262669
        }
      ],
      "unit": "per bushel"
    }
  }

Note that data property of the response is an array, so you could apply ngFor directive.