Pushing items from JSON objects to dropdown in angular js

Question

I have a json file as

var myJson = {
   "Number of Devices":2,
   "Block Devices":{
      "bdev0":{
         "Backend_Device_Path":"/dev/ram1",
         "Capacity":"16777216",
         "Bytes_Written":9848,
         "timestamp":"4365093970",
         "IO_Operations":87204,
         "Guest_Device_Name":"vdb",
         "Bytes_Read":107619,
         "Guest_IP_Address":"192.168.26.88"
      },
      "bdev1":{
         "Backend_Device_Path":"/dev/ram2",
         "Capacity":"16777216",
         "Bytes_Written":10062,
         "timestamp":"9365093970",
         "IO_Operations":93789,
         "Guest_Device_Name":"vdb",
         "Bytes_Read":116524,
         "Guest_IP_Address":"192.168.26.100"
      }
   }
}

I want to push names of block devices in a dropdown menu. the names are bdev0 and bdev1 after looking at some example I tried the following code but I just returns [Object object] in the drop down

view

<select ng-model="selectedDevice" ng-options="item as devices['Block Devices'] for item in selectdevice">
    <option value="">Select Device</option>
   </select>

And controller

    .controller('timeSeriesCtrl', function($scope, $timeout, $http) {

    $scope.selectedDevice = null;
    $scope.selectdevice = [];
    $scope.bytesRead = [];
    $scope.bytesWritten = [];
    $scope.IoOps = [];
    $scope.currentTime = [];
    var path = 'http://orbit5.ds.cs.umu.se:8888/vrio/debug/blk'


function getData(){
  $http.get(path)
  .success(function(data){
    $scope.devices = data
    angular.forEach($scope.devices['Block Devices'], function(value, key){

           $scope.selectdevice = key;
})


  })
}

getData();





  });

You want ng-options="item.displayName as item for item in devices['Block Devices']" — Malkus
– Malkus, Commented Feb 10, 2016 at 13:21

Nix · Accepted Answer · 2016-02-10 13:43:15Z

2

Remove all of the code for the forEach and just use the (key,value) syntax for ng-options

function getData(){
  $http.get(path)
  .success(function(data){
    $scope.devices = data
    //angular.forEach($scope.devices['Block Devices'], function(value, key){
       //$scope.selectdevice = key;
    //   value.key = key;
    //})
  });

In html:

<select ng-model="selectedDevice" 
      ng-options="item as key  for (key,item) in devices['Block Devices'] ">
    <option value="">Select Device</option>
</select>

Fiddle: https://jsfiddle.net/ncapito/4mqFJ/6/

edited Feb 10, 2016 at 13:43

answered Feb 10, 2016 at 13:20

Nix

58.8k31 gold badges154 silver badges205 bronze badges

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

6 Comments

Imo Over a year ago

Gives me error Error: [$parse:syntax] Syntax Error: Token 'as' is an unexpected token at column 10 of the expression [item.key as devices['Block Devices']] starting at [as devices['Block Devices']].

Nix Over a year ago

So i updated it i didn't even see how you were setting devices. I'm assuming i'm showing the right set.

Imo Over a year ago

Sorry about that Just updated the code you can see now how I set devices

Nix Over a year ago

I think i know what you want to do and I simplified it dramatically.

A G Over a year ago

your original answer did not had (key, value) trick. Its got updated after I posted my answer. I verified this just now.

|

A G · Accepted Answer · 2016-02-10 13:32:53Z

1

object.toString() = [object object]. Object.prototype.toString()

You can use the (key, content) syntax to display keys.

<select ng-model="selectedItem">
      <option ng-repeat="(key, content) in myjson['Block Devices']" value="{{item}}">{{key}}</option>
</select>

answered Feb 10, 2016 at 13:32

A G

22.9k12 gold badges93 silver badges113 bronze badges

1 Comment

Nix Over a year ago

No need for ng-repeat you can just use ng-options to do the same.

Collectives™ on Stack Overflow

Pushing items from JSON objects to dropdown in angular js

2 Answers 2

6 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Related