CODEWITHSUNDEEP
javascriptangularjsjson
StackOverflowVeryHelpful
StackOverflowVeryHelpful

Reputation: 2427

How to populate select options from a json file using angularjs

How to populate select options from a json file using angularjs?

I would like to know how can i populate the following as part of dropdown

todos.products.[DynamicProductName].attributes.Location

DynamicProductName since there are so many different product names under todo.products

http://plnkr.co/edit/LMUqxL4ykOGvTsfFTUoN?p=preview

Upvotes: 0

Views: 484

Answers (2)

tylerwal
tylerwal

Reputation: 1870

ngOptions as well as ngRepeat both support iterating over collections as well as objects, which is important for your data. Those DynamicProductName values are really just keys within the products object.

The basic syntax for using ngOptions in this situation is:

<select ng-model="test" ng-options="key as value for (key , value) in data"></select>

In this case, key would be what would be stored in your model while value would be displayed within the select.

Your value is slightly more nested and thus would be: value.attributes.location.

If you would prefer to have the value (possibly more relevant data), then you could change the code to:

<select 
    data-ng-model="test" 
    data-ng-options="value as value.attributes.location for (key , value) in todos.products"
    >
</select>

Upvotes: 1

paulgoblin
paulgoblin

Reputation: 157

<select data-ng-model="test"
data-ng-options="product.attributes.location for product in todos.products">
</select>

This is pretty longwinded. It may be better to put a products array on the scope and ng-options over that.

Upvotes: 0

Related Questions