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

Question

I looked at similar questions, but none of them helped me. I am going to receive an object like the following:

[
  {
    \"id\": 1,
    \"name\": \"Safa\",
          


        

Answer 1

this.requests=res here you are trying to assign following response to object,

{"headers":{"normalizedNames":{},"lazyUpdate":null},"status":200,"statusText":"OK",
"url":"xyz","ok":true,"type":4,"body":[{}]}

Since, object format is different then response format you have to assign res.body part from your response to get required contents.

Answer 2

*********** PARSE THE RESULT TO JSON OBJECT: JSON.prase(result.arrayOfObjects) ***********

I came to this page after I faced this issue. So, my issue was that the server is sending array of objects in the form of string. It is something like this:

when I printed result on console after getting from server it is string:

'arrayOfObject': '[
                  {'id': '123', 'designation': 'developer'},
                  {'id': '422', 'designation': 'lead'}
               ]'

So, I have to convert this string to JSON after getting it from server. Use method for parsing the result string that you receive from server:

JSON.parse(result.arrayOfObjects)

Answer 3

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>

Answer 4

You should use async pipe. Doc: https://angular.io/api/common/AsyncPipe

For example:

<li *ngFor="let a of authorizationTypes | async"[value]="a.id">
     {{ a.name }}
</li>

Answer 5

i have the same problem. this is how i fixed the problem. first when the error is occurred, my array data is coming form DB like this --,

{brands: Array(5), _id: "5ae9455f7f7af749cb2d3740"} 

make sure that your data is an ARRAY, not an OBJECT that carries an array. only array look like this --,

(5) [{…}, {…}, {…}, {…}, {…}]

it solved my problem.

Answer 6

i have faced same problem

my initial json

{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}

i have changed my json inside []

[{"items":

         [
           {"id":1,
            "Name":"test4"
           },
           {"id":2,
            "Name":"test1"
           }
         ]
}]