Angular JS ng-options selecting list from JSON

Question

I'm tryin to use a select with ng-options to populate my dropdown. This is my JSON

{ "Food": [ { "Name": Apple, "HealthCondition": [ { "Name": "High Blood Pressure", "Eat": null }, { "Name": "High Cholesterol", "Eat": null }, { "Name": "Heart Disease", "Eat": null }, { "Name": "Osteoporosis", "Eat": null }, { "Name": "Digestive Disorder", "Eat": null } ] }

And this is my select <select class="chosen-select" ng-model="selectedValue" ng-options="x.HealthCondition for x in myResults.Food" multiple chosen></select> and the result I'm getting is [object Object],[object Object],[object Object],[object Object],[object Object]

I'm trying to get a list of the Health Condition Names! Any help would be greatly appreciated. Stumped on this for hours. I'm using the Angular Chosen directive. This is working correctly if I just use the Name field like x.Name but I want to get HealthCondition Name.

Any help would be greatly appreciated!

score 0 · Answer 1 · answered Feb 12 '17 at 20:58

0

Try <select class="chosen-select" ng-model="selectedValue" ng-options="x.Name as x.Name for x in myResults.Food.HealthCondition" multiple chosen></select>

answered Feb 12 '17 at 20:58

Monika Bozhinova

294
3
16

should be – Kalyan Feb 12 '17 at 21:02
Not really, check the [documentation](http://adityasharat.github.io/angular-chosen/) of the used directive. – Monika Bozhinova Feb 12 '17 at 21:10
thanks @MonikaBozhinova but that didn't work for me. Rohit's solution worked. – kurtg Feb 16 '17 at 14:58

score 0 · Answer 2 · answered Feb 13 '17 at 00:46

0

The issue is that your data is not able to be used for ng-options in its current format. You need to reduce the available HealthConditions down into a single array instead of multiple objects with a HealthCondition array as a property.

In your controller you will need to map the data to a single array like so:

$scope.HealthConditions = myResults.reduce(function(arr, result){ 
    for(var i in result.HealthCondition){
        arr.push(result.HealthCondition[i]);
    }
    return arr;
}, []);

And then in your view use the following:

<select class="chosen-select" ng-model="selectedValue" ng-options="x.Name for x in HealthConditions" multiple chosen></select>

answered Feb 13 '17 at 00:46

Teddy Sterne

13,774
2
46
51

Thanks Teddy but this didn't work. @Rohit's solution worked for me. He suggested this `x.Name as x.Name for x in myResults.Food[0].HealthCondition` in my ng-options.You're not the first person to tell me that it wouldn't work with my JSON structured as it is so I was surprised this worked. – kurtg Feb 16 '17 at 14:54
Glad to hear you found a solution. I imagine others like myself figured your data would have more than just one food element in the results and you would want to display all possible health conditions for every food item. – Teddy Sterne Feb 16 '17 at 14:57

score 0 · Accepted Answer · answered Feb 13 '17 at 12:42

Some Observations :

Your JSON is not valid. Apple should be a string against the name key.
You are iterating the Food array in ng-options it should be HealthCondition.

DEMO

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl',function($scope) {
    $scope.jsonObj = {
  "Food": [
    {
      "Name": "Apple",
      "HealthCondition": [
        {
        "Name": "High Blood Pressure",
        "Eat": null
        },
        {
        "Name": "High Cholesterol",
        "Eat": null
        },
        {
        "Name": "Heart Disease",
        "Eat": null
        },
        {
        "Name": "Osteoporosis",
        "Eat": null
        },
        {
        "Name": "Digestive Disorder",
        "Eat": null
        }
    ]
}]};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select class="chosen-select" ng-model="selectedValue" ng-options="x.Name as x.Name for x in jsonObj.Food[0].HealthCondition" multiple chosen></select>
</div>

Thank you @Rohit ! This worked! The only thing I did was change jsonObj to my scopes name myResults. — kurtg, Feb 16 '17 at 14:56
@kurtg Can you please mark it as a correct so that it will be useful for others also. — Debug Diva, Feb 16 '17 at 16:44
ok I did that, sorry pretty new to stackoverflow, didn't see how but clicked the check between the up and down arrows and that seemed to do it! thanks again — kurtg, Feb 17 '17 at 17:23

Angular JS ng-options selecting list from JSON

3 Answers3