Can't loop through a POST request JSON response in Angular 8

Question

i'm trying to loop through a JSON object that i get after performing a POST request to my REST API but i get the following error :

 DatetodateComponent.html:33 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngDoCheck (common.js:4377)
    at checkAndUpdateDirectiveInline (core.js:27791)
    at checkAndUpdateNodeInline (core.js:38472)
    at checkAndUpdateNode (core.js:38411)
    at debugCheckAndUpdateNode (core.js:39433)
    at debugCheckDirectivesFn (core.js:39376)
    at Object.eval [as updateDirectives] (DatetodateComponent.html:33)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39364)
    at checkAndUpdateView (core.js:38376)
    at callViewAction (core.js:38742)

the problem is that in other cases everything works fine but in this particular case no matter what i do i get the same error, i've verified the json data and it is a valid JSON object, here's my code :

1. myservice.ts

    dateToDateStat(obj){
        return this.http.post("http://www.example.com/api/registres/datetodate", JSON.stringify(obj), this.httpOptions);
      }

2. component.ts

    generateStat(){
            this.uploadService.dateToDateStat({'from' : '2019-12-01', 'to' : '2019-12-31'})
            .subscribe(
              (data)=>this.stats = data,
              (err)=>console.log(err)
            )
          }

3. template.html

<table class="table table-bordered">
    <tbody>
        <tr *ngFor="let ln of stats; let i = index">
          <td>{{i}}</td>
          <ng-template ngFor let-l [ngForOf]="ln" let-in="index">
            <td>{{l.mousajal}}</td>
            <td>{{l.mahkoum}}</td>
          </ng-template>
        </tr>
    </tbody>
</table>

and here's the returned JSON

{
    "\u0639\u0644\u0645\u064a \u0645\u0631\u0648\u0646\u064a \u0631\u0634\u064a\u062f\u0629": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 2,
            "mahkoum": 2
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 4,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 14,
            "mahkoum": 14
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 54,
            "mahkoum": 50
        }
    },
    "\u0628\u0648\u0634\u0647\u0627\u0628 \u0627\u0644\u0635\u062f\u064a\u0642": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 1,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 1,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 4,
            "mahkoum": 10
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 2,
            "mahkoum": 11
        }
    },
    "\u0631\u0634\u064a\u062f\u064a \u062d\u0645\u064a\u062f": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 1
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 4,
            "mahkoum": 10
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 1,
            "mahkoum": 3
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 1,
            "mahkoum": 3
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 2
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 1,
            "mahkoum": 5
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 0,
            "mahkoum": 0
        }
    },
    "\u0631\u0627\u0641\u0639 \u0645\u062d\u0645\u062f\t": {
        "\u0627\u0644\u0645\u062e\u062a\u0644\u0641\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0624\u0648\u0644\u064a\u0629 \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0648\u0636\u0639\u064a\u0629 \u0627\u0644\u0641\u0631\u062f\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0639\u0642\u0648\u062f \u0627\u0644\u0627\u062f\u0627\u0631\u064a\u0629 \u0648 \u0627\u0644\u0635\u0641\u0642\u0627\u062a": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0646\u0632\u0639 \u0627\u0644\u0645\u0644\u0643\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062d\u0635\u064a\u0644 \u062f\u064a\u0648\u0646 \u0627\u0644\u062e\u0632\u064a\u0646\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0636\u0631\u064a\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0642\u0636\u0627\u0626\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0639\u0627\u0634\u0627\u062a \u0627\u0644\u0645\u062f\u0646\u064a\u0629 \u0648\u0627\u0644\u0639\u0633\u0643\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0645\u0646\u0627\u0632\u0639\u0627\u062a \u0627\u0644\u0627\u0646\u062a\u062e\u0627\u0628\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0625\u064a\u0642\u0627\u0641 \u062a\u0646\u0641\u064a\u0630 \u0627\u0644\u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u0625\u062f\u0627\u0631\u064a\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u062a\u062c\u0627\u0648\u0632 \u0627\u0644\u0633\u0644\u0637\u0629": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u062d\u062c\u0632 \u0644\u062f\u0649 \u0627\u0644\u063a\u064a\u0631": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\ufef7\u0648\u0627\u0645\u0631 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0637\u0644\u0628": {
            "mousajal": 0,
            "mahkoum": 0
        },
        "\u0627\u0644\u0627\u0633\u062a\u0639\u062c\u0627\u0644\u064a": {
            "mousajal": 0,
            "mahkoum": 0
        }
    }
}

Answer 1

after digging a little more i have found that Angular 8 has a new Pipe called keyvalue that allows iteration over objects using *ngFor and in my case it goes like that :

<tbody>
    <tr *ngFor="let ln of stats | keyvalue">
        <ng-container *ngFor="let l of ln.value | keyvalue">
            <td>{{l.value.mahkoum}}</td>
            <td>{{l.value.mousajal}}</td>
        </ng-container>
        <td>{{ln.key}}</td>
    </tr>
</tbody>

Answer 2

ngFor works only for an array. your response is not an array its Object. Object.keys(yourObject) returns your object keys array.

TS

export class AppComponent  {

  stats = {
    'id_01': {
      name: 'feyz',
      lastname: 'yild'
    },
    'id_02': {
      name: 'user2',
      lastname: 'user2'
    },
  }
  keys = Object.keys(this.stats)
  ngOnInit() {
    console.log('this.keys', this.keys)
  }
}

HTML

 <tbody>
    <tr>
      <td>key</td>
      <td>name</td>
      <td>lastname</td>
    </tr>
    <tr *ngFor="let key of keys">
      <td>{{key}}</td>
      <td>{{stats[key].name}}</td>
      <td>{{stats[key].lastname}}</td>
    </tr>
</tbody>

Answer 3

The error NgFor only supports binding to Iterables such as Arrays is probably referring to the fact that the returned JSON is not in fact an Array. Looks like you're trying to to loop through an object's keys ( which *ngFor does not support. )

One solution might be to process your object before you feed it into your html. Maybe like so.

let arr = [];


// For each object entry, 
Object.entries(obj).map(([key1, value1]) => {
  console.log('key1', key1)
  console.log('value1', value1)
    // Look inside of that entry
  Object.entries(value1).map(([key2, value2]) => {
    console.log('key2', key2)
    console.log('value2', value2)
    // Push that value into arr
    arr.push(value2)
  });

})
// This is what ends up in arr. 
console.log('end', arr)

then in your html you can <tr *ngFor="let ln of arr; let i = index">

heres a fiddle https://jsfiddle.net/alb_17la/3em4as1j/22/