Print data of type [object Object]-CodePudding

I want to print the data of each translation in my HTML code

I received from my api this format of data :

{"Data":
[
  {
    "Code":"Hello",
    "TraductionsFormat":
    [
      {
        "Code":"Hello",
        "Lot":3,
        "Description":null,
        "Id":1,
        "IdLangage":"FR",
        "Traduction":"Bonjour"
       }
     ]
   }
]

I try to print the data in this code but that don't worked :

<div *ngFor="let traduction of traductionData">
  <p>{{traduction.Code}}</p>
  <p>{{traduction.TraductionsFormat.IdLangage}}</p>
  <p>{{traduction.TraductionsFormat.Traduction}}</p>
</div>

CodePudding user response：

Your response/data is a nested JSON object with arrays so that should be taken into consideration when trying to display data in the template.

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div>
    <div *ngFor="let traduction of traductionData.Data">
      {{ traduction.Code }}
      <div>
        <div *ngFor="let item of traduction.TraductionsFormat">
          {{item.Id}} {{item.IdLangage}} {{item.Traduction}}
        </div>
      </div>
    </div>
  </div>
  `,
})
export class AppComponent {
  traductionData = {
    Data: [
      {
        Code: 'Hello',
        TraductionsFormat: [
          {
            Code: 'Hello',
            Lot: 3,
            Description: null,
            Id: 1,
            IdLangage: 'FR',
            Traduction: 'Bonjour',
          },
        ],
      },
    ],
  };
}

Working Stackblitz: https://stackblitz.com/edit/angular-ngfor-example-34qv3v?file=app/app.component.ts