Read from json file 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?

console item inside looping and check if you getting item. angular.forEach(jsonData, function (item) { console.log(item); $scope.arrSeries.push(item.platform); }); — Ritesh Ranjan
– Ritesh Ranjan, Commented Jan 1, 2018 at 13:46

Omar Einea · Accepted Answer · 2018-01-01 14:08:27Z

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.

edited Jan 1, 2018 at 14:08

answered Jan 1, 2018 at 13:59

Omar Einea

2,5327 gold badges25 silver badges36 bronze badges

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

Collectives™ on Stack Overflow

Read from json file angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related