Print data of type [object Object]

Question

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>

nll_ptr · Accepted Answer · 2022-04-07 12:11:52Z

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%2Fapp.component.ts

Collectives™ on Stack Overflow

Print data of type [object Object]

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related