Access the certain key of json response [AngularJS]

Question

Here is my angular code

$scope.StartCPU = function () {

//Initialize the Timer to run every 1000 milliseconds i.e. one second.
            $scope.GetCPUData = $interval(function(){
              $http.get('http://localhost:3034/api/test/metrics').
                success(function(data, status, headers, config) {
                $scope.Details = data;
             });}, 1000);  
        };

Html code as follows

<div ng-controller="HttpGetController">
    <button ng-click="StartCPU()">Get All Data</button> 
    <h1>CPU data</h1>
    <pre>{{Details | json}}</pre>
</div>

I am getting the response as below

{
  "data": [
  {
    "_id": "57ee5641931b429431085fc4",
    "system": 0.06249,
    "process": 0.0091652,
    "timestamp": "2016-09-30T12:10:40.780Z",
    "__v": 0,
    "createdAt": "2016-09-30T12:10:41.927Z"
  }
]
}

Now I want to access the value of the keys "system" and "process". How can I do it?

<h1 ng-bind="Details.data[0].system"></h1> will result in <h1>0.06249>/h1> — devqon
– devqon, Commented Sep 30, 2016 at 12:36

Sunil B N · Accepted Answer · 2016-09-30 12:22:29Z

2

data.data[0].system

and data.data[0].process

Explanation: Here your data is an Object with property data.

//complete thing is your response data
{
  "data": [ // data.data <--array
  { // data.data[0] <--first object of the array
    "_id": "57ee5641931b429431085fc4",
    "system": 0.06249,// data.data[0].system <--its property
    "process": 0.0091652,
    "timestamp": "2016-09-30T12:10:40.780Z",
    "__v": 0,
    "createdAt": "2016-09-30T12:10:41.927Z"
  }
]
}

edited Sep 30, 2016 at 12:22

answered Sep 30, 2016 at 12:17

Sunil B N

4,2251 gold badge33 silver badges53 bronze badges

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

Comments

Weedoze · Accepted Answer · 2016-09-30 12:21:00Z

1

In your data object that you get from the call, you have the propertydata which is an array

You should then call the first element of the array

data.data[0]

Which will return you

  {
    "_id": "57ee5641931b429431085fc4",
    "system": 0.06249,
    "process": 0.0091652,
    "timestamp": "2016-09-30T12:10:40.780Z",
    "__v": 0,
    "createdAt": "2016-09-30T12:10:41.927Z"
  }

Then you call the elements that you need

data.data[0].system

data.data[0].process

answered Sep 30, 2016 at 12:21

Weedoze

14k2 gold badges38 silver badges65 bronze badges

Comments

Kerisnarendra · Accepted Answer · 2016-09-30 12:34:54Z

0

It means it returns an array, may you can use something like this:

<table class="table datatable">
	<thead>
		<tr>
		    <th>system</th>
		    <th>process</th>
		</tr>
	</thead>
	<tbody ng-repeat="detail in Details">
		<tr>
		    <td>{{detail.system}}</td>
		    <td>{{detail.process}}</td>
		</tr>
	</tbody>
</table>

answered Sep 30, 2016 at 12:34

Kerisnarendra

9239 silver badges14 bronze badges

Collectives™ on Stack Overflow

Access the certain key of json response [AngularJS]

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related