Javascript seperating array of objects into multiple arrays using map(), and Iterator

Question

1. Basically I have an array of objects like

   var array = [{x: 10, y: 5, r: 10, ...} ]

There are more fields in the object, but to the point, this is the way I've found to seperate the fields to arrays:

var x = array.map(obj => obj.x);
var y = array.map(obj => obj.y);
// and so on for each field

Works, but seems very inefficient as the number of fields and the array size grows, as this scans the array multiple times. I could use a standard loop, but I do prefer the map() as I think it is more readable in this case. Is it possible to return multiple values from map? I think something like:

var [x, y] = array.map(obj => [obj.x, obj.y]); // should output two arrays

Or anything similar which will be readable (reduce is less readable IMO).

2. I did notice some newer javascript functions like array.entries() which return an iterator object. How can I implement such functions?

Skivvy

Do all the objects contain the same keys? – Bootie

Answer 1

You could reduce the array and iterate the objects key/value pairs. Then push the values to the array of the given property.

var array = [{ x: 10, y: 5, r: 10 }, { x: 11, y: 6, r: 11 }],
    result = array.reduce((r, o) => {
        Object.entries(o).forEach(([k, v]) => (r[k] = r[k] || []).push(v));
        return r;
    }, Object.create(null));
    
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Sufflate

Answer 2

So, you were on to the right start with your second attempt:

var [x, y] = array.map(obj => [obj.x, obj.y]);

As you indicate, the first attempt is too inefficient, since you will have to loop through the array multiple times for each field you want to pull out, but you can do everything you want to do using an array's .reduce() method.

I would do the following:

var [x, y] = array.reduce(
    (accum, val) => {
        accum[0].push(val.x);
        accum[1].push(val.y);
        return accum;
    },
    [ [], [] ]
);

What I'm doing is telling the reducer to initialize the accumulator with an empty array of arrays ([ [], [] ]), and when it loops through the array, it will put the .x properties into the first array in the accumulator and the .y properties into the second array. And thanks to destructuring, x will be an array of all the .x properties and y will be an array of all the .y properties.

This approach is easy to extend as your fields grow by adding more empty arrays to the initial accumulator object and making sure in the reducer to push those fields into that new object.

Clemens

How to make it generic? i.e not just for two properties – Skivvy

Answer 3

If all the objects have the same keys, you could get a copy of those keys and cache so you won't need to get them for every object. You can then use those keys to initialize the result object, then loop the array and push the values into the arrays, like so:

var keys = Object.keys(array[0]);                          // get the keys of the first object (assuming all objects have the same keys)
var result = {};                                           // the result object (you can use the safe Object.create(null) instead of {})

keys.forEach(key => result[key] = []);                     // initialize the result object (make an empty array entry for each key in keys)

array.forEach(obj =>                                       // for each object in array
  keys.forEach(key => result[key].push(obj[key]))          // add the values of this object to their corresponding array from result using keys from the array keys
);

Demo:

var array = [{ x: 10, y: 5, r: 10 }, { x: 11, y: 6, r: 11 }];

var keys = Object.keys(array[0]);
var result = {};

keys.forEach(key => result[key] = []);

array.forEach(obj =>
  keys.forEach(key => result[key].push(obj[key]))
);
    
console.log(result);

Bootie