JavaScript - make object from multiple arrays

Question

I have 3 arrays:

colors = ['green', 'red', 'black'];
positionToId = [0, 32, 15];
results = ["0", "1", "2"];

And want to achieve something like this:

{results: '0', 'positionToId: '31', colors: 'black'},
{results: '1', 'positionToId: '2', colors: 'red'},
{results: '2', 'positionToId: '11', colors: 'black'}

How can I do that? Thanks.

Please do not include code as an image. Include code as code. Also, what have you done so far? StackOverflow expects you to [try to solve your own problem first](https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users), as your attempts help us to better understand what you want. Please edit the question to illustrate the specific problem you're having in a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve). For more information, please see [ask] and take the [tour]. — dmcgrandle, Nov 11 '18 at 01:52
Does this answer your question? [How to create an array of objects from multiple arrays](https://stackoverflow.com/questions/40539591/how-to-create-an-array-of-objects-from-multiple-arrays) — pilchard, Mar 27 '23 at 11:34

score 1 · Accepted Answer · answered Nov 11 '18 at 22:51

You want to merge these arrays into an array of objects with key => value.

Easiest way is to map one of them.

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

Example:

colors = ['green', 'red', 'black'];
positionToId = [0, 32, 15];
results = ["0", "1", "2"];


console.log(results.map((result,i) => {
  return {
    results: results[i], 
    positionToId: positionToId[i],
    colors: colors[i],
  };
}));

score 0 · Answer 2 · answered Nov 11 '18 at 22:57

Since you have an array results that you seem to want to use as your base and you want to replace these numbers, with objects keyed by the values already there I would just reduce them.

colors = ['green', 'red', 'black'];
positionToId = [0, 32, 15];
results = ["0", "1", "2"];

const newObject = results.reduce((acc, index) => ({
    ...acc,
    [index]: {
        positionToId: positionToId[index],
        colors: colors[index],
    }
}), {})

This also has the benefit of allowing you to access your items by id without having to loop over an array checking each of the id's

score 0 · Answer 3 · answered Nov 11 '18 at 23:02

const colors = ['green', 'red', 'black'];
const positionToId = [0, 32, 15];
const results = ["0", "1", "2"];

const addProperties = (properties, name, results) => properties.reduce((results, property, index) => {
  results[index][name] = property;
  return results;
}, results);

let output = Array.from(Array(3), () => ({}));

addProperties(colors, 'colors', output);
addProperties(positionToId, 'positionToId', output);
addProperties(results, 'results', output);

console.log(output)

JavaScript - make object from multiple arrays

3 Answers3