Get values from array of objects angularjs, it returns only last item

Question

I want to get values from array of objects using angular.forEach exactly every value of element in every item. When I use angular.forEach function and loop the array of objects it only return the values of the last item. I spent hours in searching and thinking to get a solution but in vain.

Please get a look in my code:

This is the array of objects from json file that I want to get values from.

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"
  }
]

controller.js:

'use strict';
var app= angular.module('app');
app.controller('MainController',['$scope', '$http', MainController]);

function MainController ($scope, $http) {

    var request = {
        method: 'get',
        url: 'data.json',
        dataType: 'json',
        contentType: "application/json"
    };

    $scope.arrData = new Array;    
    $http(request)
        .then(function onSuccess(jsonData) {

            // LOOP THROUGH DATA IN THE JSON FILE.
            angular.forEach(jsonData.data, function (item) {

                //Get data in each object
               $scope.arrData = Object.keys(item).map(function(key){return item[key]});// get all values

            });
            console.log($scope.arrData);
        });
}

Here is the result:

["ios", 2994960132, 96722616, 3091682748, 33788984, 4, 1, 3, 1.152542372881356, 4.354767717207995, "unknown"]

Or, I want to get all of this each item. What should I add to my code to make it work! Thanks.

charlietfl · Accepted Answer · 2018-01-01 22:46:22Z

1

You are overwriting $scope.arrData in every iteration of forEach

Use map() instead of forEach() and return your keys mapping in the outer map() callback

$scope.arrData = jsonData.data.map(function(item) { 
  return Object.keys(item).map(function(key) {
    return item[key]
  }); 
});

answered Jan 1, 2018 at 22:46

charlietfl

172k14 gold badges125 silver badges154 bronze badges

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

4 Comments

Atom Over a year ago

I get it, thank you. Also I need to eliminate the values of "platform" and ''live" from the resulted array. I know that it solved by slice(1,10) in a array but in my case, how to do this ?

charlietfl Over a year ago

can add a filter() in the inner mapping Object.keys(item).filter(function(key){/* return true if wanted, false if not*/}).map(/* same as before*/})

Atom Over a year ago

What shoud I put a code inside filter function() ? I need to eliminate the values of platform and live from it. slice(1,10) it didn't work.

charlietfl Over a year ago

Try : filter(function(key){return key !=='live' && key !=='platform'})

Collectives™ on Stack Overflow

Get values from array of objects angularjs, it returns only last item

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related