Bonjour,

Tout est dans le titre, lorsque je ne trouve pas de solution pour afficher la valeur d'un object qui se situe dans un tableau d'object.

{
   "id": 2,
   "menu": true,
   "cat_traduction": [
	{
	    "id": 4,
	    "language": "fr",
	     "text": "animaux"
	 },
	{
	    "id": 5,
	    "language": "en",
	     "text": "animals"
	 }
		]
}

Voici à quoi ressemble l'objet renvoyé par l'API. Mais mon problème reste l'affichage partie HTML:

<table id="dataTable" class="row-border hover">
    <thead>
    <tr>
      <th>Nom de la catégorie</th>
      <th>Menu Actif</th>
      <th>Gestion</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let a of (category)">
      <td>{{a.cat_traduction.find()}}</td>
      <td class="text-center" *ngIf="a.menu">Oui</td>
      <td class="text-center" *ngIf="!a.menu">Non</td>
      <td class="text-center">
        <a [routerLink]="['/categories/edit/', a.id]"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
        <i class="fa fa-trash" aria-hidden="true"></i>
      </td>
    </tr>
    </tbody>
  </table>

Mon problème vient de cette ligne: "<td>{{a.cat_traduction.find()}}</td>", j'ai essayé pas mal de chose mais sans résultat.

Y a t'il une solution pour afficher le text de la traduction? Car j'ai beau cherché je ne trouve pas de solution viable

Salut,

Alors dans ton html tu ne peux pas mettre a.cat_traduction.find() ; de plus cat_traduction est un tableau donc il faut faire un autre *ngFor.

let categories = [
  {
    "id": 2,
    "menu": true,
    "cat_traduction": [
      {
        "id": 4,
        "language": "fr",
        "text": "animaux"
      },
      {
        "id": 5,
        "language": "en",
        "text": "animals"
      }
    ]
  }
]

si tes données sont bien sous cette forme, alors dans ton ngFor il faudrait plutot mettre

<... *ngFor="let category of categories">
 <span>{{ category.text }}</span>

Merci de ta réponse, pour le *nfFor il est correct (c'est juste qu'au lieu d'avoir mis categories j'ai mis category une petite erreur d'orthographe :x )

Du coup j'ai réussi avec : 

    <tr *ngFor="let a of (category)">
      <td *ngFor="let b of a.cat_traduction">
        <span *ngIf="b.language === 'fr'">{{b.text}}</span>
      </td>
      <td class="text-center" *ngIf="a.menu">Oui</td>
      <td class="text-center" *ngIf="!a.menu">Non</td>
      <td class="text-center">
        <a [routerLink]="['/categories/edit/', a.id]"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
        <i class="fa fa-trash" aria-hidden="true"></i>
      </td>
    </tr>

Mais je ne trouve pas ça propre au niveau du code..