0

I have an associative array like below which I want to bind with my dropdown:

{
        "Item1": [
          {
            "title": "Item1",
            "choices": [
              "Egg",
              "burger",
            ]
          }
        ],
        "Item2": [
          {
            "title": "Item2",
            "choices": [
              "Pizza",
              "Rice",
            ]
          }
        ]
     }

I am trying to bind dropdown based on this associative array, but the problem is it is displaying as object object.

I want to show title in dropdown for each of the item like below:

Item1
Item2

I have tried to take reference from below SO question but it didn't work out:

key-value pairs in ng-options

Angularjs ng-options with an array of key-pair

var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {
    $scope.item=
    {
        "Item1": [
          {
            "title": "Item1",
            "choices": [
              "Egg",
              "burger",
            ]
          }
        ],
        "Item2": [
          {
            "title": "Item2",
            "choices": [
              "Pizza",
              "Rice",
            ]
          }
        ]
     }

 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <ul ng-app="myApp" ng-controller="MyController">
     <select ng-model="myItem.title" ng-options="key as value for (key , value) in item">
           <option value="">Select Items</option>
     </select>
</ul>

2
  • do your item details (the Object with title, choices) need to be wrapped in array? would be easier to parse without that array wrapper. Commented Aug 28, 2017 at 18:24
  • @jdubjdub actually I am having various types of items like french,Italian,chineses in which each of this items will have some choices I.e is I have this items as associative array Commented Aug 28, 2017 at 18:39

1 Answer 1

2

It should be like to this:

   ng-options="value as key for (key , value) in item">

var app = angular.module("myApp", []);
app.controller("MyController", function ($scope) {

    $scope.item=
    {
        "Item1": [
          {
            "title": "Item1",
            "choices": [
              "Egg",
              "burger",
            ]
          }
        ],
        "Item2": [
          {
            "title": "Item2",
            "choices": [
              "Pizza",
              "Rice",
            ]
          }
        ]
     }

 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <ul ng-app="myApp" ng-controller="MyController">
     <select ng-model="myItem.title" ng-options="value as key for (key , value) in item">
           <option value="">Select Items</option>
     </select>
     
     {{myItem.title}}
</ul>

Sign up to request clarification or add additional context in comments.

7 Comments

Why value[0]?Wont this will always select only first item of my associative array??
It is unclear that what is the option value? see updated answer.
Upvoted for your kind efforts towards helping me.Can you please explain me about ng-options for this associative array :)
of course. just i don't konw what do you want have for ng-model? value is vague for me.
so you should try this value[0].title as key ...
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.