How to use nested json object with ngFor

Question

I have a problem iterating through a json object to display messages. The scenario is that I have messages sent from_id to to_id and the jsonData as follow:

jsonData={
    "chat":
    {
        "79":
        {
            "from":"Testing Page - joe",
            "from_id":79,
            "to":"userTestName",
            "to_id":1548,
            "unread":2,
            "messages":
            [
                {"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
                {"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
            ]
        },
        "44":
        {
            "from":"Rock Music Band",
            "from_id":44,
            "to":"userTestName",
            "to_id":1548,
            "unread":1,
            "messages":
            [
                {"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
            ]
        }
    },
    "unread":3
}

I am facing a problem to display these messages in a <ul> using angular *ngFor:

  <ul>
    <li *ngFor="let messageData of jsonData.chat;>
      <div class="message-info">
        <h4>{{messageData.from}}</h4>
        <h4>{{messageData.messages[0].text}}</h4>
      </div>
    </li>
  </ul>

I'm getting the error of not supported object.

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

What should my jsonData look like in order to display messages? I want each id 79 - `44' to be a separate object.

You have to convert the object into an array. NgFor only works on arrays, and not objects — eikooc
– eikooc, Commented Apr 12, 2019 at 13:58
jsonData.chat is not an array, this is the only reason you are getting an Error. — Tilak Dewangan
– Tilak Dewangan, Commented Apr 12, 2019 at 14:06

pzaenger · Accepted Answer · 2019-04-12 14:12:10Z

2

jsonData is an object and not an array, therefore the error. You might want to use the KeyValuePipe:

<ul>
  <li *ngFor="let data of jsonData.chat | keyvalue>
    <div class="message-info">
      <h4>{{jsonData.chat[data.key].from}}</h4> <!-- Or even better: data.value.from -->
      <h4>{{jsonData.chat[data.key].messages[0].text}}</h4> <!-- Or even better: data.value.messages[0].text -->
      <!-- Want to loop through your messages? -->
      <ul>
        <li *ngFor="let message of data.value.messages">{{message.text}}</li>
      </ul>
    </div>
  </li>
</ul>

Though it might be worth it to transform your data into an array.

edited Apr 12, 2019 at 14:12

answered Apr 12, 2019 at 14:03

pzaenger

12k3 gold badges48 silver badges54 bronze badges

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

1 Comment

Ali Over a year ago

thank you, but this requires to update my angular dependencies in order to use keyValue, can you please show how to convert my json data to array without changing any keys in the given json data ?

milo · Accepted Answer · 2019-04-12 14:07:17Z

You have to format your json as an Array in order for ngFor to work, I think this is what you are looking for : https://stackblitz.com/edit/angular-h7ezpn?file=src%2Fapp%2Fapp.component.ts

  "chat":
  [
      {"title" :"79",
      "content":
      {
          "from":"Testing Page - joe",
          "from_id":79,
          "to":"userTestName",
          "to_id":1548,
          "unread":2,
          "messages":
          [
              {"id":154,"page_id":79,"user_id":1548,"text":"this is the first message to be sent by joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-10 13:54:10","updated_at":"2019-04-10 13:54:10"},
              {"id":155,"page_id":79,"user_id":1548,"text":"this is the second message sent to joe","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 12:37:39","updated_at":"2019-04-11 12:37:39"}
          ]
      }},
      {
       "title" :"44",
       "content":
      {
          "from":"Rock Music Band",
          "from_id":44,
          "to":"userTestName",
          "to_id":1548,
          "unread":1,
          "messages":
          [
              {"id":156,"page_id":44,"user_id":1548,"text":"Hello this message from rock","seen":0,"isgroup":0,"group_id":null,"created_at":"2019-04-11 13:18:44","updated_at":"2019-04-11 13:18:44"}
          ]
      }}
  ],
  "unread":3
}

Collectives™ on Stack Overflow

How to use nested json object with ngFor

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related