Как я могу разобрать JSON

Question

Падения, Я пытаюсь проанализировать объект JSON в Angular, но он не работает. В моем сервисе я создал объект json и вставил все данные. В компоненте я пытаюсь проанализировать этот json и отобразить все сообщения в youSend.message.

Я хочу отобразить все сообщения от вас Отправить в component.html

jsonDATA

[
{
  "name": "Valentyn",
  "email": "fr@fr.fr",
  "mobile": "0650004641",
  "code_postale": "78000",
  "messages": [
    {
      "youSend": [
          { message: "Hello, how much this PC?"},
          { message: "Ok, I want by"},
          { message: "Thanks for your answers"},
      ],
      "forYouSend": [
        { message: "Hello, this PC 1499"},
        { message: "Ok, I prepare your order"},
        { message: "Thanks for your"},
      ]
    }
  ],
  "orders": [
    {
      "object": "MSI Ge62VR Apache Pro",
      "price": 1499
    },
    {
      "object": "Samsung S9",
      "price": 899
    },        {
      "object": "Qnap-TS251+",
      "price": 499
    }
  ]
}]

file.servive.ts

public users: [] = [{***jsonDATA***}]
public allUsers: [] = [];
constructor() { }
public getUsers() {
   return this.users.map(data => this.allUsers = data);
}

file.component.ts

users: [] = [];
msgUserSend: [] = [];
constructor( private papafils: PapafilsService ) { }
ngOnInit() {
   this.users = this.papafils.getUsers();
   this.msgUserSend = this.users.map(b => {
   return b.messages;
});

file.component.html

<div *ngFor="let user of users">
   <h4 class="nameColor">{{ user.name }}</h4>
   <div *ngFor="let msg of user.messages">
      {{ msg.youSend.message }}
   </div>
   <div *ngFor="let userOrder of user.orders" class="userOrders">
      {{ userOrder.object }} and {{ userOrder.price }}
   </div>

Answer 1

Вам нужен еще один цикл:

<div *ngFor="let user of users">
    <h4 class="nameColor">{{ user.name }}</h4>
    <div *ngFor="let msg of user.messages">
        <div *ngFor="let m of msg.youSend">
            {{ m.message }}
        </div>
    </div>
    <div *ngFor="let userOrder of user.orders" class="userOrders">
        {{ userOrder.object }} and {{ userOrder.price }}
    </div>
</div>

Answer 2

Поскольку сообщения - это массив с 1 элементом, вам необходимо использовать messages[0] для доступа к свойству yousend.

<div *ngFor="let msg of user.messages[0].youSend">
      {{ msg.message }}
   </div>

Демо https://stackblitz.com/edit/angular-gm3hwf

Answer 3

youSend - это массив сообщений, поэтому вы не можете напрямую использовать msg.youSend.message

для отображения массива сообщений вы можете попробовать это

   <h4 class="nameColor">{{ user.name }}</h4>
   <div *ngFor="let msg of user.messages">
      {{ msg.youSend |json }}
   </div>
   <div *ngFor="let userOrder of user.orders" class="userOrders">
      {{ userOrder.object }} and {{ userOrder.price }}
   </div>
</div>