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!

Answer 1

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>

Answer 2

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

Answer 3

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>