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

To iterate over an object which has a json format like below

{
  "mango": { "color": "orange", "taste": "sweet" }
  "lemon": { "color": "yellow", "taste": "sour" }
}
  1. Assign it to a variable

    let rawData = { "mang":{...}, "lemon": {...} }

  2. Create a empty array(s) for holding the values(or keys)

    let dataValues = []; //For values

    let dataKeys = []; //For keys

  3. Loop over the keys and add the values(and keys) to variables

    for(let key in rawData) { //Pay attention to the 'in' dataValues.push(rawData[key]); dataKeys.push(key); }

  4. Now you have an array of keys and values which you can use in *ngFor or a for loop

    for(let d of dataValues) { console.log("Data Values",d); }

    <tr *ngFor='let data of dataValues'> ..... </tr>