Transform array of keys and array of values into array of objects javascript

Question

My question is quite similar to this one: Merge keys array and values array into an object in JavaScript

However, I don't seem to find the solution for my example. If I have these two arrays:

const keys = ['x', 'y', 'z'];

const values = [
  [0, 1, 2],
  [10, 20, 30],
];

How do I combine them into an array of objects, such that would be the expected result?

[
  {
    x: 0,
    y: 1,
    z: 2,
  },
  {
    x: 10,
    y: 20,
    z: 30,
  },
]

And the problem is? Just do the steps from the linked question values.length times (values.reduce(<magic>)) — Andreas
– Andreas, Commented May 21, 2021 at 8:32
values.map(x => x.reduce((a,c,i) => (a[keys[i]] = c, a), {}) would be my very quick attempt — evolutionxbox
– evolutionxbox, Commented May 21, 2021 at 8:35

zb22 · Accepted Answer · 2021-05-21 10:10:06Z

1

You can use Array.prototype.map() and Array.prototype.reduce() for this:

const keys = ['x', 'y', 'z'];

const values = [
  [0, 1, 2],
  [10, 20, 30],
];

const res = values.map(arr => arr.reduce((acc, curr, index) => {
  acc[keys[index]] = curr

  return acc;
}, {x: null, y: null, z: null}));

console.log(res);

Or you can also do it without reduce() like so:

const res = values.map(arr => ({
  [keys[0]]: arr[0],
  [keys[1]]: arr[1],
  [keys[2]]: arr[2]
}));

edited May 21, 2021 at 10:10

answered May 21, 2021 at 8:43

zb22

3,2413 gold badges22 silver badges38 bronze badges

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

1 Comment

evolutionxbox Over a year ago

(you might want to increment the index in the map, otherwise it will be the same key/value repeated three times)

LaytonGB · Accepted Answer · 2021-05-21 08:50:10Z

Cycle through the value arrays and create an object for each, then cycle through the values within those arrays and use the keys array as the keys.

const keys = ['x', 'y', 'z'];

const values = [
  [0, 1, 2],
  [10, 20, 30],
];

const output = [];
values.forEach((v, i) => {
  output[i] = {}; // create objects for each of the value arrays
  v.forEach((w, j) => {
    output[i][keys[j]] = w; // use the correct keys with each of the values
  });
});

console.log(output);

As comments have also pointed out, this can be done with Array.reduce:

const keys = ['x', 'y', 'z'];

const values = [
  [0, 1, 2],
  [10, 20, 30],
];

const output = values.map(x => { // for each of the values arrays
  return x.reduce((a, c, i) => { // take its values
    a[keys[i]] = c // map them to an object property one by one
    return a; // put them together in the same object.
  }, {});
});

console.log(output);

Sadi · Accepted Answer · 2021-05-21 10:28:49Z

0

const keys = ['x', 'y', 'z'];

const values = [
  [0, 1, 2],
  [10, 20, 30],
];


function toObject(keys, values) {
    let final = []
     for (let i = 0; i < values.length; i++){
         let result = {};
         for(let j=0;j<keys.length;j++){
             result[keys[j]] = values[i][j];
            
         }
        final.push(result)
     }
    return final 
    console.log(final)
     
 }
 
 toObject(keys,values )

it will work

answered May 21, 2021 at 10:28

Sadi

113 bronze badges

Collectives™ on Stack Overflow

Transform array of keys and array of values into array of objects javascript

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest