AngularJS select not populating dynamically

Question

I have the following JSON (test JSON as how it comes from the server):

$scope.allCategoriesAndSubcategories = {
          "category" : {
              "categoryname" : "pasteleria",
              "subcategory" : [
                  {"subcategoryname" : "pastel tradicional", "subcategoryid" : "1"},
                  {"subcategoryname" : "pastel con fondant", "subcategoryid" : "2"}
              ]
          },
          "category" : {
              "categoryname" : "eventos",
              "subcategory" : [
                  {"subcategoryname" : "boda", "subcategoryid" : "1"},
                  {"subcategoryname" : "cumpleanos", "subcategoryid" : "2"}
              ]
          }
      };

Then on the select in the HTML I do the following:

<div input-field>
     <select material-select
     ng-model="picture.category1" required>
        <optgroup ng-repeat="category in allCategoriesAndSubcategories"  label="{{category.categoryname}}">
            <option value="{{category.subcategory.subcategoryid}}">{{category.subcategory.subcategoryname}}</option>
        </optgroup>
     </select>
     <label>Categoría #2</label>
</div>

When I console.log() I get the actual object so it's not undefined, however the select is not populating. Should I do something else to populate it? I'm new to angularJS and I can't find an example similar to this one

I mean it's not populating it. The select turns out to be undefined despite it having the value of a JSON object — CodeTrooper
– CodeTrooper, Commented Jan 6, 2016 at 14:34

maurycy · Accepted Answer · 2016-01-06 15:10:33Z

2

The HTML is invalid if you wish to create list of options

<div input-field>
     <select material-select ng-model="picture.category1" required>
        <optgroup ng-repeat="category in allCategoriesAndSubcategories"  label="{{category.categoryname}}">
            <option ng-repeat="subcategory in category.subcategory" value="{{subcategory.subcategoryid}}">{{subcategory.subcategoryname}}</option>
        </optgroup>
     </select>
     <label>Categoría #2</label>
</div>

then after you select element the model picture.category1 should be populated

working plunker http://codepen.io/maurycyg/pen/PZpRRy

also your data should be formatted differently

$scope.allCategoriesAndSubcategories = [{
      "categoryname": "pasteleria",
      "subcategory": [{
        "subcategoryname": "pastel tradicional",
        "subcategoryid": "1"
      }, {
        "subcategoryname": "pastel con fondant",
        "subcategoryid": "2"
      }]
    }, {
      "categoryname": "eventos",
      "subcategory": [{
        "subcategoryname": "boda",
        "subcategoryid": "1"
      }, {
        "subcategoryname": "cumpleanos",
        "subcategoryid": "2"
      }]
    }];
  });

edited Jan 6, 2016 at 15:10

answered Jan 6, 2016 at 14:38

maurycy

8,4201 gold badge30 silver badges44 bronze badges

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

6 Comments

CodeTrooper Over a year ago

This works, however, for some reason, the first category is being ignored. As you can see, it only prints the second JSON set, not the first one.

Shaohao Over a year ago

@codeninja because you have a duplicated key on the ng-repeat.

maurycy Over a year ago

Well that's because allCategoriesAndSubcategories is an object with duplicated key, it should be more like this codepen.io/maurycyg/pen/PZpRRy?editors=101

CodeTrooper Over a year ago

I understand now, however, why does the ng-repeat still have the category name in category in allCategoriesAndSubcategories since there's no object inside the JSON that is called category? This has always confused me

maurycy Over a year ago

in that case category takes the value of whole object from array of objects. it can be whatever you want to use internally in ng-repeat. In other words: ng-repeat="element in elements" is a single element from array or object called elements hope that makes sense

|

Alex Vasilev · Accepted Answer · 2016-01-06 14:41:09Z

0

I think that proble is here

 <option value="{{category.subcategory.subcategoryid}}">

Subcategory is array, and i think that you should use new ng-repeat to make list of <option> tags

answered Jan 6, 2016 at 14:41

Alex Vasilev

493 bronze badges

Collectives™ on Stack Overflow

AngularJS select not populating dynamically

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related