Get JSON data in drop down list using AngularJS.js?

Question

This is my HTML code

<body ng-app="mainApp">
    <div ng-controller="myController">
        <select>
<option ng-repeat="person in persons">{{ person.data }}</option>
</select>
    </div>
</body>

This is my JavaScript code

var app = angular.module("mainApp", []);
app.controller("myController", function($scope, $http) {
    $http.get("JSON URL")
        .success(function(response) {
            $scope.persons = response.data;
        });
});

My JSON URL is in this format [{"status": "success", "data": ["bank1","bank2","bank3"]}], I want only "data" list in drop down, there is too many banks in JSON data, How to use select and option?

Consider using the ng-options directive. For more information, see AngularJS ng-options Directive API Reference. — georgeawg
– georgeawg, Commented Jan 18, 2017 at 4:40

Sajeetharan · Accepted Answer · 2017-01-18 04:41:30Z

0

You can do this,

Controller:

app.controller("dobController", ["$scope", "$http",
  function($scope, $http) {
    $http.get("test.json").then(function(response) {
      $scope.data = response.data[0].data;
      console.log($scope.data);
    })
  }

]);

HTML:

<body ng-controller="dobController">
  <select class="form-control" id="selection" ng-model="currentSelected" ng-options="selection as selection for selection in data"></select>
</body>

DEMO

answered Jan 18, 2017 at 4:41

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

6 Comments

Sajeetharan Over a year ago

@shilpa you are welcom

shilpa Over a year ago

If i select particular bank in the list, How to link the dependble drop down, with one more API which i have for next drop down? can u please help..

Sajeetharan Over a year ago

yes sure! do you want to call another api and get data?

shilpa Over a year ago

yes with dynamic drop down, I have one more API of states list based on selecting particular bank, should i use ui-routing?

Sajeetharan Over a year ago

no need touse routing for that, do you have to pass selected bank as a parameter for the new api?

|

Collectives™ on Stack Overflow

Get JSON data in drop down list using AngularJS.js?

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related