Angular : Unable to parse Nested Json

Question

I have the following JSON response from a web service. I want to use it on the front end but the "codeSubstance" is not showing anything. How do I parse it correctly ?

I've tried the following :

<tr *ngFor ="let m of medicamentsDetailslist;">
  <td>{{m.compositions.substancesActives.codeSubstance}}</td>
</tr>

and this also

 <tr *ngFor ="let m of medicamentsDetailslist;">
      <td>{{m.compositions.substancesActives["codeSubstance"]}}</td>
    </tr>

Any help appreciated

Answer 1

compositions and substancesActives are again an array, so you should be iterating over it again

<tr *ngFor ="let m of medicamentsDetailslist;">
     <td>
        <ng-container *ngFor="let comp of m.compositions">
           <ng-container *ngFor="let sub of comp.substancesActives">
              {{sub.codeSubstance}}
           </ng-container>
        </ng-container>
     </td>
</tr>

Answer 2

hi i think you have an array in substancesActives, so try this :

<tr *ngFor ="let m of medicamentsDetailslist;">
  <td>{{m.compositions.substancesActives[0].codeSubstance}}</td>
</tr>

If it's ok, so add a new loop for substanceActives

EDIT (more details in comments) :

m.compositions[0].substancesActives[0].codeSubstance