CODEWITHSUNDEEP
javascript
Lucas Verra
Lucas Verra

Reputation: 73

Split Array of Objects

Is there a way of changing my array of objects into a few seperate arrays for each property of my objects?

For example, I have this:

[ 
    { 
        date: Mon Aug 08 2016 16:59:16 GMT+0200 (CEST),
        visits: 0,
        hits: 578,
        views: 5131 
    },
    { 
        date: Tue Aug 09 2016 16:59:16 GMT+0200 (CEST),
        visits: -1,
        hits: 548,
        views: 722 
    },
    { 
        date: Wed Aug 10 2016 16:59:16 GMT+0200 (CEST),
        visits: -1,
        hits: 571,
        views: 4772 
    }
]

And I want it to look like this:

var dates = ["date1", "date2", ...],
    visits = ["visit1", "visit2", ...],
    hits = ["hits1", "hits2", ...],
    views = ["view1", "view2", ...];

So that I can use it with plot.ly.

Upvotes: 4

Views: 29482

Answers (4)

adeneo
adeneo

Reputation: 318182

You can use reduce and destructuring

var arr = [
  { date: "Mon Aug 08 2016 16:59:16 GMT+0200 (CEST)", visits: 0, hits: 578, views: 5131 },
  { date: "Tue Aug 09 2016 16:59:16 GMT+0200 (CEST)", visits: -1, hits: 548, views: 722 },
  { date: "Wed Aug 10 2016 16:59:16 GMT+0200 (CEST)", visits: -1, hits: 571, views: 4772 }
];

let keys = ['date','visits','hits','views'],
    [dates, visits, hits, views] = arr.reduce( (a,b) => {
    return keys.map( (x,i) => {a[i].push(b[x])}), a;
}, [[],[],[],[]]);

console.log(dates, visits, hits, views)
.as-console-wrapper {top: 0; max-height: 100%!important}

Upvotes: 4

BrTkCa
BrTkCa

Reputation: 4783

You can use the map function:

 

    var array = [
    {
        date: "Mon Aug 08 2016 16:59:16 GMT+0200 (CEST)",
        visits: 0,
        hits: 578,
        views: 5131,
    },
    {
        date: "Tue Aug 09 2016 16:59:16 GMT+0200 (CEST)",
        visits: -1,
        hits: 548,
        views: 722,
    },
    {
        date: "Wed Aug 10 2016 16:59:16 GMT+0200 (CEST)",
        visits: -1,
        hits: 571,
        views: 4772,
    },
];

var dates = array.map(item => item.date);
var visits = array.map(item => item.visits);
var hits = array.map(item => item.hits);
var views = array.map(item => item.views);

console.log(dates, visits, hits, views);

Upvotes: 15

Nina Scholz
Nina Scholz

Reputation: 386550

You could iterating the array and push the same keys to the same key in an object.

This answer utilized an object, opposite of the wanted results in single variables. The advantage is to keep all data combined and not spreaded over the code in different variable.

The use is easy with just the reference by property.

var data = [{ "date": 'Mon Aug 08 2016 16:59:16 GMT+0200 (CEST)', visits: 0, hits: 578, views: 5131 }, { "date": 'Tue Aug 09 2016 16:59:16 GMT+0200 (CEST)', visits: -1, hits: 548, views: 722 }, { "date": 'Wed Aug 10 2016 16:59:16 GMT+0200 (CEST)', visits: -1, hits: 571, views: 4772 }],
    object = { date: [], visits: [], hits: [], views: [] },
    keys = Object.keys(object);

data.forEach(function (a) {
    keys.forEach(function (k) {
       object[k].push(a[k]);
    });
});

console.log(object);

Upvotes: 1

Adil Aliyev
Adil Aliyev

Reputation: 1169

IMHO it will be difficult to make without loop.

This code might be simpler:

var data =  [
{ date: "Mon Aug 08 2016 16:59:16 GMT+0200 (CEST)", visits: 0, hits: 578, views: 5131 },
{ date: "Tue Aug 09 2016 16:59:16 GMT+0200 (CEST)", visits: -1, hits: 548, views: 722 },
{ date: "Wed Aug 10 2016 16:59:16 GMT+0200 (CEST)", visits: -1, hits: 571, views: 4772 }
];

var getArrayByValue = function(data, key) {
    var result = [];
    for (i in data) {
        result.push(data[i][key])
    }
    return result;
}

var dates = getArrayByValue(data, 'date')
var visits = getArrayByValue(data, 'visits')
var hits = getArrayByValue(data, 'hits')
var views = getArrayByValue(data, 'views')

Upvotes: 0

Related Questions