Angular retrieve specific data into $scope variable is not working

Question

I initialize here

 $scope.statuses = [];

Then if I simply set the data from $http.get to the $scope variable, that "works" but I need to filter it down more.

$scope.statuses = result.data.Devices; 
console.log($scope.statuses);

That returns the array of data like this in dev tools console output

0: Object $$hashKey : "object:5" Aid : "oAAABTUAAg==" DKiIndex : "DKi00000002" DefaultPayload : "C:\ProgramData\" DeviceId : "00022B9A000000010001" DeviceStatus : 3 ManifestIdList : Array[3] PendingManifestId : null PendingTimeStamp : "0001-01-01T00:00:00" Sha : "R2tiZRQgY/iohXZt5O4HaQwtVe/adWU2VOcKaelJ3Us=" StagedManifestIdList : Array[0]

However I only WANT some specific data

$scope.statuses = result.data.Devices.DeviceStatus;

Why does it say 'undefined' and how do I do this?

So 0: Object DeviceStatus is there.. :/

<div ng-app="app" ng-controller="DeviceController as vm">


...
        <tr ng-repeat="device in vm.devices">
             <td>{{device.DeviceId}}</td>
             <td>{{device.DeviceStatus}}</td>
             <td>{{device.Aid}}</td>
             <td>{{device.Sha}}</td>
        </tr>
...

Essentially I wish to manipulate the data in Javascript /angular (.js) before it makes it to the ng-repeat loop

Thus is $scope even the proper thing to even be using?

I know that I have some data to change for example

Some data in a field was surrounded by [] e.g. [01,02,03] so doing {{ device.aid.join(',') }} would "fix" the [] issue but i need to have some function like this? where can i use this?

// usage {{displayArchived(item.archives)}}
$scope.displayArchived = function(archives){
    return (archives.length > 0) ? archives.join(',') : 'none';
};

Then will a "let" help for numbers of DeviceStatus?

  let statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];

Answer 1

In this instance, result.data.Devices is an array of objects that looks something like this:

[
   {DeviceId : "00022B9A000000010001" DeviceStatus : 3 .... },
   {DeviceId : "00022B9A000030011111" DeviceStatus : 9 ...},
   ....
]

So when you try to get result.data.Devices.DeviceStatus, there is no array element called DeviceStatus, which is why you are getting back undefined.

You will need to iterate through the array of Devices to get a specific Device's DeviceStatus:

angular.forEach(result.data.Devices, function(value, index){
           $scope.statuses.push(value.DeviceStatus);
         });

or you can access directly if you know which device you want:

var index = 1;
$scope.statuses = result.data.Devices[index].DeviceStatus;

EDIT:

If you want to get all of the devices and display {{ device.DeviceStatus }} with your template, here is a solution:

Code:

$scope.devices = result.data.Devices;

Template:

<div ng-repeat="device in devices">
    {{ device.DeviceStatus }} 
</div>

In our code, we assign the request.data.Devices array to $scope.devices. Then in the template, we use ng-repeat to go through each device in $scope.devices and display the device's DeviceStatus.

EDIT2:

In order to match the DeviceStatus to it's actual name, you can create a custom filter.

In your code create the filter:

app.filter('deviceStatus', function () {
  return function (status_id) {
      var statuses = ['Old Device', 'New Device', 'Activated', 'Unactivated'];
      return statuses[status_id];
  };
});

You can use the new filter in your template now:

<td>{{device.DeviceId | deviceStatus}}</td>

We pipe the DeviceId into our custom deviceStatus filter in order to get the correct status name in the template.