Angular 2: Create drop-down list with array of dictionaries

Question

I'm using options tag in Angular 2 to populate my dropdown list. The dropdown list is populating correctly with dateTest1.json, however, when iterating thru the values of a given key in a .json file, then it's having trouble populating the drop down list. What's the correct way in Angular 2 for populating dropdown list with dateTest.json example below?

*.component.html when retrieving from dateTest.json: EXCEPTION: TypeError: Cannot read property 'month' of undefined in [dateAttributesList.month in *Component@63:22]

<option *ngFor="#m of dateAttributesList.month" [value]="m">{{m}}</option>

dateTest.json:

[
    {"month": ["Dec", "Jan", ...]},
    {"day" : ["1","2"...]}
]

*.component.html when retrieving from dateTest1.json: correctly populating

<option *ngFor="#m of dateAttributesList" [value]="m">{{m}}</option>

dateTest1.json:

[
    {"month": "Dec"},
    {"month": "Jan"},
    {"month": "Feb"},
    ...
 ]

Günter Zöchbauer · Answer 1 · 2016-04-21T19:11:49.477

1

Use the safe navigation operator if the value you bind to is passed by an input or fetched by an async call:

<option *ngFor="#m of dateAttributesList?.month" [value]="m.month">{{m}}</option>

[value] only supports string values. If you have object values use [ngValue]

<option *ngFor="#m of dateAttributesList" [ngValue]="m.month">{{m}}</option>

[ngValue] only works with [ngModel]

edited Apr 21 '16 at 19:11

answered Apr 21 '16 at 18:59

Günter Zöchbauer

623,577
216
2,003
1,567

the dropdown menu isn't populating correctly with dateTest.json, I've edited my question. – jerryh91 Apr 21 '16 at 19:01
I updated my answer. – Günter Zöchbauer Apr 21 '16 at 19:02
There is no errors now, but I fail to see any month values in my drop down list – jerryh91 Apr 21 '16 at 19:09
I can't see from your question what `dateAttributesList.month` returns. Try `{{m.month}}` instead of `{{m}}` – Günter Zöchbauer Apr 21 '16 at 19:12
dateAttributesList.month should return a list of values for the top level key: "month", in the variable dateAttributes. In example: dateTest.json, it will iterate the values of month, and return ["Dec", "Jan"...] – jerryh91 Apr 21 '16 at 19:15
How can I iterate thru the values of a given key, instead of iterating thru the key value pairs. – jerryh91 Apr 21 '16 at 19:16
That are string values. Then you don't need `[ngValue]`. I guess `dateAttributesList?.month` is all you need. – Günter Zöchbauer Apr 21 '16 at 19:17
http://stackoverflow.com/questions/31490713/iterate-over-typescript-dictionary-in-angular-2 – Günter Zöchbauer Apr 21 '16 at 19:18

Angular 2: Create drop-down list with array of dictionaries

1 Answers1