My task is to populate a select element from JSON data, but the challenge lies in the formatting of the JSON where the keys contain important information. I do not have control over how the data is structured.
I am attempting to iterate through the JSON and extract the key names for the main objects within the array. However, due to it being an object, I am unable to simply retrieve its name - Object.keys() does not work as expected within ng-options due to scoping issues.
I have tried various approaches similar to the following code snippet without success:
<select ng-model="$ctrl.vals"
ng-options="val as key for (key, val) in $ctrl.data"
ng-change="$ctrl.onChange()" name="{{$ctrl.name}}"
size="{{$ctrl.data.length}}" multiple>
</select>
The above code returns "0" because it is formatted as 0: [object object]. The closest result I achieved was getting [Object Object] returned, but my goal is to retrieve the key of that object, which has proven challenging.
An example of the data format I'm dealing with is:
{
"Games": [{
"Name": "Warhammer 40k 8th Edition",
"Factions": [{
"Space Marines": {
"Units": [{
"Name": "Primaris Space Marine Captain",
"Number": 1,
"Cost": -1,
"Ability": "When captain enters play you win",
"AddOns": [{
"Name": "My AddOn",
"Cost": 0,
"Text": "Add an extra Captain",
"IsSelected": false
}],
"Gear": [{
"Name": "Frag Grenade",
"Cost": 0
}]
}]
}
}]
}]
}
Within the given JSON context above, my objective is to include Factions and display the text "Space Marines" as an option. What could I be overlooking?