current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I have a json defined in my scope like 

   $scope.People = [  
    {  
          "firstName":"John",
          "lastName":"Doe",
          "Choices":[  
             {  
                "Name":"Dinner",
                "Options":[  
                   {  
                      "Name":"Fish",
                      "ID":1
                   },
                   {  
                      "Name":"Chicken",
                      "ID":2
                   },
                   {  
                      "Name":"Beef",
                      "ID":3
                   }
                ]
             },
             {  
                "Name":"Lunch",
                "Options":[  
                   {  
                      "Name":"Macaroni",
                      "ID":1
                   },
                   {  
                      "Name":"PB&J",
                      "ID":2
                   },
                   {  
                      "Name":"Fish",
                      "ID":3
                   }
                ]
             }
          ]
       },
       {  
          "firstName":"Jane",
          "lastName":"Doe"
       }
    ];

Wanted to list all the choices options name (without duplicates) in a single drop down box using angularjs.

The drop options will have the values Fish, Chicken, Beef, Macaroni, PB&J

<div ng-app="myApp" ng-controller="SomeController">
     <select ng-model="people.Choices.Name"                 
           ng-options="people.Choices.Name for people in People"></select>
</div>

But this is not working.

Any insights is appreciated.

share|improve this question
    
people != People, also not valid JSON. Name and ID need quotes. Here is your valid JSON: pastie.org/9418572 –  Ronnie Jul 24 '14 at 22:00
    
Thanks edited it. It was just typo error. people in People means for each entity in People scope. –  Pals Jul 24 '14 at 22:05
    
You still have an extra , after the ] –  Ronnie Jul 24 '14 at 22:05
    
Copied your JSON. Thanks. –  Pals Jul 24 '14 at 22:09
    
mkay, im working on a fiddle –  Ronnie Jul 24 '14 at 22:10

2 Answers 2

up vote 0 down vote

Ok, I think you'll have to do some preprocessing on the JSON array and filter it that way. This was the easiest method

HTML

<body ng-app="TestApp">
    <div ng-controller="TestController">
        <select ng-model="blah"
            ng-options="opt for opt in options">                
        </select>        
    </div>
</body>

JS

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

app.controller('TestController', function($scope)
{
    $scope.options = [];
    $scope.people = [
      {
        "firstName": "John",
        "lastName": "Doe",
        "choices": [
          {
            "name": "Dinner",
            "options": [
              {
                "name": "Fish",
                "id": 1
              },
              {
                "name": "Chicken",
                "id": 2
              },
              {
                "name": "Beef",
                "id": 3
              }
            ],
            "selectedOption": {
              "name": "Chicken",
              "id": 2
            }
          },
          {
            "name": "Lunch",
            "options": [
              {
                "name": "Macaroni",
                "id": 1
              },
              {
                "name": "PB&J",
                "id": 2
              },
              {
                "name": "Fish",
                "id": 3
              }
            ],
            "selectedOption": ""
          }
        ]
      },
      {
        "firstName": "Jane",
        "lastName": "Doe"
      }
    ];
    for (var a = 0; a < $scope.people.length; a++)
    {
        if ($scope.people[a].choices != undefined)
        {
            for (var b = 0; b < $scope.people[a].choices.length; b++)
            {
                for (var c = 0; c < $scope.people[a].choices[b].options.length; c++)
                {
                    var target = $scope.people[a].choices[b].options[c].name;
                    if ($scope.options.indexOf(target) == -1) $scope.options.push(target);
                }
            }           
        }
    }
});

http://jsfiddle.net/HX6T3/

I also modified some of the uppercase to all lower case. You can change it back if you want.

share|improve this answer
    
This seems to be a round about way. Can't we not do without pre-processing? –  Pals Jul 24 '14 at 23:56
    
This is what I was running into as well. Since the options list comes from multiple arrays within arrays within arrays you're running into trying to make angular clean up the json for you. The best way would be to have all options defined in one object/array that angular, or anything else, can call from. Then, just assign the choice made to the individual people.choice.dinner. –  Owen Jul 25 '14 at 14:34
    
I agree...make your JSON easier to work with. –  Ronnie Jul 25 '14 at 15:15
up vote 0 down vote

I'm working this to be better, but something like this? Plnkr It's a start!

 <div ng-repeat="people in People">
     <div ng-repeat="choice in people.Choices">
         <select ng-model="choice.SelectedOption"                 
           ng-options="option.Name for option in choice.Options"></select>
    </div>
 </div>

Revision 2. Now with selections! Pnkr 2

share|improve this answer
    
Nope. I want all options in a single drop down box. –  Pals Jul 24 '14 at 22:38
    
I'll keep playing –  Owen Jul 24 '14 at 22:42
    
Appreciate. Thanks. –  Pals Jul 24 '14 at 22:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.