Split Array of Objects

Question

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.

I think you would need to use one loop iterating over the objects in the initial array and then populate the arrays for dates, hits etc — Stuart Grant
– Stuart Grant, Commented Nov 17, 2016 at 14:11
@EatPeanutButter, i meant the js version of the pythonic ways :) — Lucas Verra
– Lucas Verra, Commented Nov 17, 2016 at 14:19

Braiam · Accepted Answer · 2024-09-26 15:51:55Z

15

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);

edited Sep 26, 2024 at 15:51

Braiam

4,49511 gold badges50 silver badges83 bronze badges

answered Nov 17, 2016 at 14:11

BrTkCa

4,7934 gold badges28 silver badges46 bronze badges

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

4 Comments

Mike 'Pomax' Kamermans Over a year ago

late to the party, but: why would you run through the array more than once? This is definitely not the right answer compared to a single reducing pass with a destructuring assignment.

BrTkCa Over a year ago

You have a point @Mike'Pomax'Kamermans, but I don't totally agree. If you are comparing to the solution from adeneo, both have the same time complexity of O(n). Even though my has 4 * O(n), the reducing one introduce reduce and map in a nested loop, which can introduce extra overhead. Personally speaking I'd optmize the code to use a single loop or try to change the data structure, but for readbility, maintanability and potentialy learning purpose, this one is more straightforward and easier to understand, which also is the goal of this forum.

BrTkCa Over a year ago

But yeah, would be possible as well with reduce or a normal for loop: jsfiddle.net/lbclucascosta/ejcwy7vu, jsfiddle.net/lbclucascosta/p345u096.

Mike 'Pomax' Kamermans Over a year ago

stackoverflow.com/a/40657332/740553, just below, looks pretty readable, maintainable, and good for learning though =P

Mike 'Pomax' Kamermans · Accepted Answer · 2024-09-26 16:02:40Z

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}

Nina Scholz · Accepted Answer · 2016-11-17 14:22:45Z

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);

Adil Aliyev · Accepted Answer · 2016-11-17 14:20:35Z

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')

Collectives™ on Stack Overflow

Split Array of Objects

4 Answers 4

4 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Related