Iterating over sub items in a JSON array in Angular 2 -
i know there's many answers regarding how iterate on json items in angular 2, i'm having field day (no pun intended) on trying figure 1 out:
{ "datesofinterest": [ { "name": "holidays", "year": "2017", "version": "3.0", "dataitems": [{ "langauage": "english", "listvalues": [{ "id": "bac34a", "name": "new year's day", "value": "new year's day", "startdatetime": "02/01/2017 00:00:00 am", "enddatetime": "02/01/2017 11:59:59 pm", "description":"the first day of year", "type":"statutory" }, { "id": "cad54b", "name": "family day", "value": "family day", "startdatetime": "20/02/2017 00:00:00 am", "enddatetime": "20/02/2017 11:59:59 pm", "description":"board game day family", "type":"statutory" }, { "id": "eac453a", "name": "good friday", "value": "good friday", "startdatetime": "14/04/2017 00:00:00 am", "enddatetime": "14/04/2017 11:59:59 pm", "description":"easter", "type":"statutory" } ] }, { "langauage": "french", "listvalues": [{ "id": "af73jaah", "name": "jour de l'an", "value": "jour de l'an", "startdatetime": "02/01/2017 00:00:00 am", "enddatetime": "02/01/2017 11:59:59 pm", "description":"the first day of year", "type":"statutory" }, { "id": "lksf8us877", "name": "journée familiale", "value": "journée familiale", "startdatetime": "20/02/2017 00:00:00 am", "enddatetime": "20/02/2017 11:59:59 pm", "description":"board game day family", "type":"statutory" }, { "id": "l98jhsd", "name": "vendredi saint", "value": "vendredi saint", "startdatetime": "14/04/2017 00:00:00 am", "enddatetime": "14/04/2017 11:59:59 pm", "description":"easter", "type":"statutory" } ] }] }] }
how write *ngfor this? ngfors need in same div or sub element of main ngfor?
the ngfors have are:
*ngfor="let datesofinterest of alldatesofinterests" *ngfor="let dataitem of datesofinterest.dataitems" *ngfor="let listvalue of daysofinterest.dataitems.listvalues"
you can have 1 *ngfor on single element. in second ngfor can use declared dataitem
variable first ngfor. can use <ng-container>
elements if don't want pollute generated html divs not rendered.
<ng-container *ngfor="let dataitem of datesofinterest.dataitems"> <ng-container *ngfor="let listvalue of dataitem.listvalues"> {{listvalue.name}} </ng-container> </ng-container>
Comments
Post a Comment