Read from json file angularjs - angularjs

Question

I had json file that I want to fetch data from it using angularjs 1.6 and I wrote some code in controller. I wanna sort out the properties names of objects in console like this:
['web-desktop','android','ios']
The problem that it returned array of undefined values and wanna to figure it out.
There is json file "data.json":
[
{
"platform": "web-desktop",
"cdn": 4.3673292887e+10,
"p2p": 5.667683381e+09,
"total": 4.9340976268e+10,
"upload": 5.774321084e+09,
"percentage": 12,
"viewers": 1,
"maxViewers": 10,
"averageViewers": 1.5725853094274147,
"trafficPercentage": 69.49888073943228,
"live": "unknown"
},
{
"platform": "android",
"cdn": 1.7035777808e+10,
"p2p": 1.526916976e+09,
"total": 1.8562694784e+10,
"upload": 2.753179184e+09,
"percentage": 9,
"viewers": 1,
"maxViewers": 12,
"averageViewers": 1.416065911431514,
"trafficPercentage": 26.14635154335973,
"live": "unknown"
},
{
"platform": "ios",
"cdn": 2.994960132e+09,
"p2p": 9.6722616e+07,
"total": 3.091682748e+09,
"upload": 3.3788984e+07,
"percentage": 4,
"viewers": 1,
"maxViewers": 3,
"averageViewers": 1.152542372881356,
"trafficPercentage": 4.354767717207995,
"live": "unknown"
}
]
And here is my controller:
'use strict';
var app= angular.module('app');
app.controller('MainController',['$scope', '$http', MainController]);
function MainController ($scope, $http) {
// REQUEST OPTIONS USING GET METHOD.
var request = {
method: 'get',
url: 'data.json',
dataType: 'json',
contentType: "application/json"
};
$scope.arrSeries = new Array;
$http(request)
.then(function onSuccess(jsonData) {
angular.forEach(jsonData, function (item) {
$scope.arrSeries.push(item.platform);
});
console.log($scope.arrSeries);
}).catch(function onError(request) {
console.log("not found");
});
}
It returns in console:
(6) [undefined, undefined, undefined, undefined, undefined, undefined]
Where is the trick?

Answer 1

You need to loop through items in jsonData.data not jsonData directly, like this:
$http(request)
.then(function onSuccess(jsonData) {
angular.forEach(jsonData.data, function (item) {
$scope.arrSeries.push(item.platform);
});
This is because jsonData is the response object that's returned, which looks like this:
response = {
config: {method: "GET", transformRequest: Array(1), transformResponse: Array(1), paramSerializer: ƒ, jsonpCallbackParam: "callback", …},
data: (3) [{…}, {…}, {…}],
headers: ƒ (d),
status: 200,
statusText: "OK",
xhrStatus: "complete"
}
So if you loop on the response directly, you'll loop 6 time trying to get platform from each item (which isn't there). Hence the result you got.
The data that your request returns sits in response.data
response = {
...
data: (3) [{…}, {…}, {…}],
...
}
Hope that helps.