javascript - Displaying JSON data in drop-down in AngularJS - Stack Overflow

admin管理员组

文章数量:1392007

my document.json file contains data like

[
    {"name" :"B"},
    {"name" :"A"},
    {"name" :"D"},
    {"name" :"E"}
]

when i try to display the json data in drop-down list, the last element E only displayed in drop down .my html file like

<select ng-model="selectedTestAccount" ng-options="c as c.name for c in testAccounts"></select>

and my script file like

sampleApp.controller('DemoCtrl', function ($scope, $http) {
  $scope.selectedTestAccount = null;
  $scope.testAccounts = [];

  $http.get('document.json').success(function (data) {
    $scope.testAccounts = data;
  });
});

How can i display this document.json data in drop-down list with default selected as first element in AngularJS. Any guidelines please

my document.json file contains data like

[
    {"name" :"B"},
    {"name" :"A"},
    {"name" :"D"},
    {"name" :"E"}
]

when i try to display the json data in drop-down list, the last element E only displayed in drop down .my html file like

<select ng-model="selectedTestAccount" ng-options="c as c.name for c in testAccounts"></select>

and my script file like

sampleApp.controller('DemoCtrl', function ($scope, $http) {
  $scope.selectedTestAccount = null;
  $scope.testAccounts = [];

  $http.get('document.json').success(function (data) {
    $scope.testAccounts = data;
  });
});

How can i display this document.json data in drop-down list with default selected as first element in AngularJS. Any guidelines please

• javascript
• json
• angularjs
• drop-down-menu
• ng-options

Share Improve this question Follow edited Jun 27, 2014 at 14:09 Yoshi 54.7k1414 gold badges9292 silver badges107107 bronze badges asked Jun 27, 2014 at 13:33 ShekkarShekkar 24433 gold badges1010 silver badges2222 bronze badges 7

• I think your data is not correct. Because you have same names of each key so it is getting overwritten by other one. So in last there is one key with just value E. – Mritunjay Commented Jun 27, 2014 at 13:49
• Thank you ,just now i edited the JSON object structure ,but the name is mon for my requirement . – Shekkar Commented Jun 27, 2014 at 14:11
• No I am not saying to remove name field. But before that you had 4 name fields in one object. which is not possible. – Mritunjay Commented Jun 27, 2014 at 14:12
• yah ,i edited the JSON structure ,thank you – Shekkar Commented Jun 27, 2014 at 14:20
• I think the ments which helped you are seems important for your question. You should vote them, so they will appear in starting of the post and will be helpful for other viewers. Thanx – Mritunjay Commented Jun 28, 2014 at 3:09

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 4

Your JSON isn't quite right. You need to have braces around each item, like this:

[ 
  { "name" :"B" }, 
  { "name" :"A" }, 
  { "name" :"D" }, 
  { "name" :"E" } 
]

You can select the first item in the dropdown by default like this:

$scope.selectedTestAccount = $scope.testAccounts[0];

Demo

本文标签： javascriptDisplaying JSON data in dropdown in AngularJSStack Overflow