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'];

You have an array, you must specify the position(index) that you want to get the DeviceStatus. Ex. If you want to get the first DeviceStatus: $scope.statuses = result.data.Devices[0].DeviceStatus;. — developer033
– developer033, Commented Aug 31, 2016 at 1:59
{{ device.DeviceStatus }} was in my html , so i am wanting to capture each value in the ng-repeat , i do want to manipulate it a bit with a function — user6321478
– user6321478, Commented Aug 31, 2016 at 2:47
Yes, very sorry - editing question now. greatly appreciate it — user6321478
– user6321478, Commented Aug 31, 2016 at 3:43

accraze · Accepted Answer · 2016-08-31 04:21:14Z

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.

edited Aug 31, 2016 at 4:21

answered Aug 31, 2016 at 2:24

accraze

1,5527 gold badges22 silver badges47 bronze badges

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

4 Comments

user6321478 Over a year ago

I added more code , I need to see if a DeviceStatus = 1 then DeviceStatus = "Activated" else if DeviceStatus = 2 then DeviceStatus = "Unactived " etc.. How can I achieve that? Thanks in advance

accraze Over a year ago

@JeremyMiller I added info on how to check the device status code with a custom filter.

user6321478 Over a year ago

app is not defined also push of undefined

user6321478 Over a year ago

I posted a new question and this time I have a Plunker which should help you see how I have the application setup . I'm watching videos and learning.... I appreciate your help stackoverflow.com/questions/39242795/…

Collectives™ on Stack Overflow

Angular retrieve specific data into $scope variable is not working

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related