Как использовать вложенный объект json с ngFor

Question

У меня проблема с итерацией по объекту json для отображения сообщений.Сценарий состоит в том, что у меня есть сообщения, отправленные from_id на to_id и jsonData, как указано ниже:

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
}

Я сталкиваюсь с проблемой отображения этих сообщений в <ul> с использованием угловых *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>

Я получаю сообщение об ошибке не поддерживаемого объекта.

ОШИБКА: ошибка: не удается найти другой поддерживающий объект '[object Object]' типа 'object'».NgFor поддерживает только привязку к итерациям, таким как массивы.

Как должен выглядеть мой jsonData для отображения сообщений?Я хочу, чтобы каждый id 79 - `44 'был отдельным объектом.

Answer 1

jsonData - это объект, а не массив, поэтому ошибка. Возможно, вы захотите использовать 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>

Хотя может быть стоит преобразовать ваши данные в массив.

Answer 2

Вы должны отформатировать ваш json как массив, чтобы ngFor работал, Я думаю, это то, что вы ищете: 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
}