Convert a JavaScript array of objects into an array of arrays

Question

Convert a JavaScript array of objects into an array of arrays

I'm searching for a more elegant ES6 solution to transform this array:

var src = [{x:1,y:'a'},{x:2,y:'b'}];

Into this array:

var desc = [[1,2],["a","b"]];

This new array should contain one array for all properties and another array for all values.

Here is the code I currently have:

var src = [{x:1,y:'a'},{x:2,y:'b'}];

var prop1 = [];
var prop2 = [];

src.forEach(item => {
    prop1.push(item.x)
    prop2.push(item.y);
});

var desc = [prop1, prop2];

While it works well, it feels lengthy. So, any suggestions for improvement with shorter code would be appreciated.

javascript arrays ecmascript-6

Answer 1

Answer №1

You can customize the order of props (since the order of keys in an object is not guaranteed) and then iterate over the src array to extract the corresponding prop value.

var src = [{x:1,y:'a'},{x:2,y:'b'}]

var props = ['x', 'y'];

var result = props.map(prop => src.map(x => x[prop]))

console.log(result)

Answer 2

You can customize the order of props (since the order of keys in an object is not guaranteed) and then iterate over the src array to extract the corresponding prop value.

var src = [{x:1,y:'a'},{x:2,y:'b'}]

var props = ['x', 'y'];

var result = props.map(prop => src.map(x => x[prop]))

console.log(result)

Answer 3

Answer №2

To achieve this, you can leverage the power of .reduce() method:

let data = [{x: 1, y: 'a'}, {x:2, y: 'b'}];

let output = data.reduce((accumulator, currentValue) => (accumulator[0].push(currentValue.x), accumulator[1].push(currentValue.y), accumulator), [[], []]);

console.log(output);

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

Additional Documentation:

Answer 4

To achieve this, you can leverage the power of .reduce() method:

let data = [{x: 1, y: 'a'}, {x:2, y: 'b'}];

let output = data.reduce((accumulator, currentValue) => (accumulator[0].push(currentValue.x), accumulator[1].push(currentValue.y), accumulator), [[], []]);

console.log(output);

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

Additional Documentation:

Answer 5

Answer №3

One approach is to loop through the array and iterate over the keys of each object, swapping the outer and inner indices for the target element.

var src = [{ x: 1, y: 'a' }, { x: 2, y: 'b' }],
    desc = [];

src.forEach(o => Object.keys(o).forEach((k, i) => (desc[i] = desc[i] || []).push(o[k]));

console.log(desc);

Answer 6

One approach is to loop through the array and iterate over the keys of each object, swapping the outer and inner indices for the target element.

var src = [{ x: 1, y: 'a' }, { x: 2, y: 'b' }],
    desc = [];

src.forEach(o => Object.keys(o).forEach((k, i) => (desc[i] = desc[i] || []).push(o[k]));

console.log(desc);

Convert a JavaScript array of objects into an array of arrays

Answer №1

Answer №2

Answer №3

Similar questions

Ways to separate my json object into multiple variables

Obtaining data from HTML input in Flask while dynamically altering the website's URL

The Incompatibility of C Pointers and Arrays: Understanding the Differences

Incorrect format for a date in AngularJS

Show validation messages using ng-messages depending on various conditions

Execute a node script file at random intervals

Acquire the key name of an object during iteration in Jade

Infinite Array Length in Visual Basic .NET

javascript conceal a div when clicked elsewhere

Although my ajax request was unsuccessful, I was able to successfully upload my post

Inject some content into the page with the power of jQuery

What is the answer to this issue where the entity name is required to directly come after the "&" in the entity reference?

Creating an array in Javascript and populating it with dynamically generated values

Check if the page has been loaded using Jquery

Tips on retrieving values from input files using jQuery

Rotating images with React

Developing a function that can handle an array containing interface instances

How to create a blinking effect for buttons in an Angular app with ng-if or ng-show

What is the best way to retrieve an item using a composite key?

Having difficulty entering text in the modal text box and updating it with a new state