Displaying JSON data in drop-down in AngularJS

Question

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

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
– Mritunjay, Commented Jun 27, 2014 at 13:49
Thank you ,just now i edited the JSON object structure ,but the name is common for my requirement . — Shekkar
– 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
– Mritunjay, Commented Jun 27, 2014 at 14:12
I think the comments 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
– Mritunjay, Commented Jun 28, 2014 at 3:09

Jerrad · Accepted Answer · 2014-06-27 13:51:51Z

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

answered Jun 27, 2014 at 13:51

Jerrad

5,3001 gold badge20 silver badges23 bronze badges

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

3 Comments

Shekkar Over a year ago

Thank you ,just now i got my json object structure, but your answer not reading the documet.json file ,which is important for me .can you answer reading the document.json file .

Jerrad Over a year ago

@Shekkar, I've updated the demo in my answer to read from the document.json file.

Shekkar Over a year ago

Thank you @Jerrad ,i got where i stopped your Demo helps me every thing

Collectives™ on Stack Overflow

Displaying JSON data in drop-down in AngularJS

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related