move array objects into arrays

Question

I have an array of objects that look similar to this,

 [{
        name : Client 1,
        total: 900,
        value: 12000
    }, {
        name : Client 2,
        total: 10,
        value: 800
    }, {
        name : Client 3,
        total: 5,
        value : 0
}]

What I am wanting is to get 3 arrays from this, an array of name,

[Client 1, Client 2, Client 3]

and array of totals,

[900, 10, 5]

and an array of values,

[12000, 800, 0]

I thought I would be able to something like map or similar but I am very confused about how to use it. Can anyone help me out?

isvforall · Accepted Answer · 2016-03-14T14:44:51.987

2

Use Array.prototype.map function

var arr = [{ name: "Client 1", total: 900, value: 12000 }, { name: "Client 2", total: 10, value: 800 }, { name: "Client 3", total: 5, value: 0 }];

var totals = arr.map(e => e.total);
var names = arr.map(e => e.name);
var values = arr.map(e => e.value);

document.write("<pre>" + totals + "</pre>");
document.write("<pre>" + names + "</pre>");
document.write("<pre>" + values + "</pre>");

Note from @Andy

This is ES6 so you might need a transpiler if your browsers don't support it yet.

edited Mar 14 '16 at 14:44

answered Mar 14 '16 at 14:06

isvforall

8,768
6
35
50

Why `Array#map` and not `Array.prototype.map`? – Matías Fidemraizer Mar 14 '16 at 14:08
I mean, why that `#` notation? – Matías Fidemraizer Mar 14 '16 at 14:08
1

@MatíasFidemraizer, its a short writing for prototype, read here `Array.prototype.map` – Nina Scholz Mar 14 '16 at 14:14
OP, note this is ES6 so you might need a transpiler if your browsers don't support it yet. – Andy Mar 14 '16 at 14:21
@isvforall orly ( o v o )? :D Yes, I know it. BTW it's not a JS notation. I find more useful to say `Array.prototype.map` because further readers can copy-paste it and look for docs like MDN easily than Array#map. – Matías Fidemraizer Mar 14 '16 at 14:27
1

@isvforall Yeah, this is better! – Matías Fidemraizer Mar 14 '16 at 14:31

score 1 · Answer 2 · answered Mar 14 '16 at 14:10

If you're fine with an object holding each of the arrays, the following Array.prototype.reduce will work:

var a = [{
        name : "Client 1",
        total: 900,
        value: 12000
    }, {
        name : "Client 2",
        total: 10,
        value: 800
    }, {
        name : "Client 3",
        total: 5,
        value : 0
}];

var res = a.reduce(function(a,b){
    return {
    name: a.name.concat(b.name),
    total: a.total.concat(b.total),
    value: a.value.concat(b.value)
  }
},{
    name: [],
    total:[],
    value:[]
})

console.log(res) // Object {name: Array[3], total: Array[3], value: Array[3]}

For me, this is the best answer ;P Reduce is the answer to produce different results from an array... — Matías Fidemraizer, Mar 14 '16 at 15:11

Nina Scholz · Answer 3 · 2016-03-14T14:13:57.023

You can use an object with the wanted keys as arrays.

var data = [{ name: 'Client 1', total: 900, value: 12000 }, { name: 'Client 2', total: 10, value: 800 }, { name: 'Client 3', total: 5, value: 0 }],
    result = function (array) {
        var r = {};
        array.forEach(function (a) {
            Object.keys(a).forEach(function (k) {
                r[k] = r[k] || [];
                r[k].push(a[k]);
            });
        });
        return r;
    }(data);
 
document.write('<pre>name: ' + JSON.stringify(result.name, 0, 4) + '</pre>');
document.write('<pre>total: ' + JSON.stringify(result.total, 0, 4) + '</pre>');
document.write('<pre>value: ' + JSON.stringify(result.value, 0, 4) + '</pre>');
document.write('<pre>the object: ' + JSON.stringify(result, 0, 4) + '</pre>');

score 0 · Answer 4 · answered Mar 14 '16 at 14:09

if i uderstood you right you need to create 3 arrays from 1? You can do somethink like this:

var names=[];
var totals=[];
var values=[];

for(var i=0; i<objectArray.length; i++){
  names.push(objectArray[i].name);
  totals.push(objectArray[i].total);
  values.push(objectArray[i].value);
}

move array objects into arrays

4 Answers4