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

Amit Chigadani · Accepted Answer · 2019-02-27 15:11:24Z

3

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>

edited Feb 27, 2019 at 15:11

answered Feb 27, 2019 at 14:49

Amit Chigadani

29.9k14 gold badges88 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

TropicalViking Over a year ago

Thanks Amit. I have tried your code but it is still blank. The data is here. Console.log shows it. Where can be the issue ?

Amit Chigadani Over a year ago

Sorry, I see that 'compositions' is also an array.. You will need another iteration over ther

TropicalViking Over a year ago

Thanks again. Indians smart people :)

CREM Over a year ago

I recommend to have a strong type structure, after getting assigned your json to an object on you Observable , you could do simply only one ngFor against the right structure, ngFor is expensive for large amount of data

Ema.H · Accepted Answer · 2019-02-27 15:03:47Z

1

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

edited Feb 27, 2019 at 15:03

answered Feb 27, 2019 at 14:53

Ema.H

2,8883 gold badges30 silver badges42 bronze badges

4 Comments

TropicalViking Over a year ago

Tried it too but got that : Cannot read property '0' of undefined

Ema.H Over a year ago

Hum... And the code of Amit Chigadani doesn't work too ? And are you sure, codeSubstance can't be null ?

TropicalViking Over a year ago

Here it is the good one but it was near : <td>{{m.compositions[0].substancesActives[0].codeSubstance}}</td>

Ema.H Over a year ago

Yes, i ve just see the problem ! Nice ;)

Collectives™ on Stack Overflow

Angular : Unable to parse Nested Json

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related