How do I populate a multiple select dropdown with JSON data using Materialize and Angularjs?

Question

I've seen numerous examples of angularjs using JSON data to populate options in a select dropdown, but after numerous attempts and variations I still end up with a blank dropdown menu. I'm sure there's something wrong with my object naming convention, as all the angular examples are pretty confusing (what's plural? what isn't? etc.) Any help you can offer would be greatly appreciated.

JSON example:

{"fields":[
{"state": "OH",
 "gender": "male"},

{"state": "OH",
 "gender": "female"},

{"state": "IN",
 "gender": "male"} 
]};

html:

 <div class="input-field col s12 m4" ng-app="totalQuery" ng-controller="queryCtrl">
        <select multiple>
          <option ng-repeat="fields in myData">{{fields.state}}</option>
        </select>
        <label>First Category</label>
    </div>
     <div class="input-field col s12 m4" ng-app="totalQuery" ng-controller="queryCtrl">
        <select multiple>
          <option ng-repeat="fields in myData">{{fields.gender}}</option>
        </select>
        <label>Second Category</label>
    </div>

angularjs:

<script>
        var app = angular.module('totalQuery', []);
        app.controller('queryCtrl', function($scope, $http){
          $http.get("file.json").then(function(response){
            $scope.myData = response.data.fields;
          });
        });
      </script>

mtmeyer · Accepted Answer · 2016-05-10 02:28:49Z

1

You just need to add .fields into your ng-repeat.
Change:

<option ng-repeat="fields in myData">{{fields.state}}</option>

To:

<option ng-repeat="fields in myData.fields">{{fields.state}}</option>

Here is a jsFiddle of the solution: http://jsfiddle.net/eLnfgnc9/4/

It is worth noting, that it is better to use ng-options instead of ng-repeat. I find it more confusing than ng-repeat but it just seems to work better. Here is a link to the angular doc for ng-options: https://docs.angularjs.org/api/ng/directive/ngOptions

answered May 10, 2016 at 2:28

mtmeyer

2821 gold badge4 silver badges13 bronze badges

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

Comments

Wcan · Accepted Answer · 2016-05-10 04:23:58Z

0

First of all you don't need to define ng-app and ng-controller twice.

Secondly what I don't understand is why are you using two drop down menu's or jump menu to change the state and according to that you will bring the gender ? right ?

If that's the case usually when you you are working with drop down menu you need an id for each option which will be sent back to bring changed item on the basis of id.

I've made a working plunker Populate Drop Down with Json please take a look if that's what you need. I'm sure you will get the idea how to do it.

answered May 10, 2016 at 4:23

Wcan

8882 gold badges12 silver badges34 bronze badges

1 Comment

DGaffneyDC Over a year ago

This is really helpful. I think I made this more confusing than need be by leaving out some details of what I was looking to do with the json file. Each combination of state and gender actually have a a third value attached which represents the total number of individuals that meet those criteria, e.g. {OH, male, 4216}. So in this instance, the user would select OH-->Male and receive the value "4216". I was having trouble building the dropdown filters that are dependent on one another, so I left out the third variable. In retrospect that was probably a bad idea...

Collectives™ on Stack Overflow

How do I populate a multiple select dropdown with JSON data using Materialize and Angularjs?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related