angular2 display nested json list

Question

I m facing a little tricky thing in angular2 template table . I have the following json :

users : 
{
      userid : 123,
      username: 'test',
      acc : [
          {
                accid: 382746,
                cyc: [
                {
                    cycid: 28734,
                    det: [
                        {
                            detid: 239876
                        }
                },
                {
                    cycid: 3728,
                    det :[
                        {
                            detid: 632
                        },
                        {
                            detid: 2783
                        }       
                },
                {
                    cycid: 3729,
                    det :[
                        {
                            detid: 633
                        },
                        {
                            detid: 2785
                        },
                        {
                            detid: 78236
                        }
                    ]
                 }
         }
     ]
}

And I would like to display in an acc table list with the last of cyc and last det of the last cyc. like the following :

---------------------------------------------------------------------
|      acc id           |       cyc id            |       det id    |
---------------------------------------------------------------------
|     382746            |       3729              |      78236      |
---------------------------------------------------------------------

Any idea how to do it ?

can you please describe what is the relation between objects and how do we map a bit broadly in the question — Rahul Singh
– Rahul Singh, Commented Jun 22, 2017 at 8:55
Brackets in your example code snippet are not matching. It's difficult to interpret the data structure. Could you come up with a small JSFiddle or correct the data-structure snippet? — nipuna-g
– nipuna-g, Commented Jun 22, 2017 at 9:04

Ketan Akbari · Accepted Answer · 2017-06-22 13:39:22Z

1

I am not sure, might this give some clue:

<table class="table table-bordered width-150">
<tr>
    <th>accid</th>
    <th>cycid</th>
    <th>detid</th>
</tr>
<div *ngFor="let user of users; let userIndex = index">
    <div *ngFor="let accItem of user.acc ; let accIndex=index">
        <div *ngIf="userIndex == 0">
            <div *ngFor="let cyc of accItem.cyc  ; let cycIndex=index">
                <div *ngIf="cycIndex==users[userIndex].acc[accIndex]?.cyc.length-1">
                    <div *ngFor="let det of cyc.det   ; let detIndex=index">
                        <div *ngIf="detIndex==users[userIndex].acc[accIndex]?.cyc[cycIndex]?.det.length-1">
                            <tr>
                                <td>{{accItem.accid}}</td>
                                <td>{{cyc.cycid}}</td>
                                <td>{{ det.detid}}</td>
                            </tr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</table>

edited Jun 22, 2017 at 13:39

answered Jun 22, 2017 at 9:22

Ketan Akbari

11.3k5 gold badges36 silver badges52 bronze badges

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

6 Comments

K Oul Over a year ago

it will give not only the last of cyc and last of det. but it will give all of them

K Oul Over a year ago

Indeed I just need only ONE acc par line even acc has multiple cyc and cyc has multiple det AND only the last cyc and det should be displayed

K Oul Over a year ago

can you put it inside <tbody> <tr> <td> ?

K Oul Over a year ago

i m trying to get it inside my tags

Ketan Akbari Over a year ago

Let us continue this discussion in chat.

|

raj m · Accepted Answer · 2017-06-22 09:10:29Z

0

use 3 ngFor like below.

 <table *ngFor="let acc of users.acc">
     <table *ngFor="let cyc of acc.cyc">
        <table>
            <tr  *ngFor="let det of cyc.det">
            <td></td>//acc.details
            <td></td>//cyc.details
            <td></td>//det.details
            </tr>
        </table>
     </table>
 </table>

answered Jun 22, 2017 at 9:10

raj m

2,0136 gold badges23 silver badges38 bronze badges

Collectives™ on Stack Overflow

angular2 display nested json list

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related