How to populate a select dropdown using array received from $http response in angularjs?

Question

I am trying to populate a select dropdown using Months and Day values that are two separate arrays within a date.json file. My code for controller is as below

var app = angular.module("profileApp",[]);

app.controller("dobController",function($scope,$http){
$scope.dob={};

$http.get('date.json')
.then(function(response){
    $scope.months=[];
    dob = response.data;
    months=dob.Months;
}, function(response){
     alert("Error in response");
});

My problem is even though the response from the http service is received properly (I can successfully log the Months array value from the response), I cannot populate my select dropdown and it remains blank. HTML as below

<div class="container-fluid" ng-controller="dobController">
  <label class="col-sm-6 control-label">Date of Birth:</label>
    <div class="col-sm-6">
      <select ng-model="birthday" ng-options="option for option in months">{{months}}</select> 
    </div>
</div>

My date.json file

{
"Months" : ["January","February","March","April","May","June","July","August","September","October","November","December"],
"Days" : [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
}

I don't think you need for option. Try option in months instead for a simple array — Sterling Archer
– Sterling Archer, Commented Sep 4, 2016 at 19:17
Tried it. Think it violated the syntax rule for the ng-options directive and the dropdown is still empty — Ajitesh Chhatani
– Ajitesh Chhatani, Commented Sep 4, 2016 at 19:25

Sajeetharan · Accepted Answer · 2016-09-04 19:33:15Z

1

Do this,

<select ng-model="selectedItem" ng-options="month as month for month in months">

DEMO APP

edited Sep 4, 2016 at 19:33

answered Sep 4, 2016 at 19:25

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

1 Comment

Ajitesh Chhatani Over a year ago

Yes it worked. I made the controller changes according to your's. Although what still baffles me is why didn't my controller work. Thanks!

Collectives™ on Stack Overflow

How to populate a select dropdown using array received from $http response in angularjs?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related