Dropdown value is not binding with associative array

Question

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>

do your item details (the Object with title, choices) need to be wrapped in array? would be easier to parse without that array wrapper. — jdubjdub, Aug 28 '17 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 — I Love Stackoverflow, Aug 28 '17 at 18:39

Hadi J · Accepted Answer · 2017-08-28T18:57:48.017

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>

edited Aug 28 '17 at 18:57

answered Aug 28 '17 at 17:11

Hadi J

16,989
4
36
62

Why value[0]?Wont this will always select only first item of my associative array?? – I Love Stackoverflow Aug 28 '17 at 18:26
It is unclear that what is the option value? see updated answer. – Hadi J Aug 28 '17 at 18:59
Upvoted for your kind efforts towards helping me.Can you please explain me about ng-options for this associative array :) – I Love Stackoverflow Aug 29 '17 at 06:15
of course. just i don't konw what do you want have for `ng-model`? value is vague for me. – Hadi J Aug 29 '17 at 07:59
I only want to have title i.e item1 not whole object in my ng-model – I Love Stackoverflow Aug 29 '17 at 08:05
1

so you should try this `value[0].title as key ...` – Hadi J Aug 29 '17 at 08:10
This worked.Thank you so much for your kind efforts towards helping me and please keep helping like this.Appreciated :) – I Love Stackoverflow Aug 30 '17 at 06:01

Dropdown value is not binding with associative array

1 Answers1