Create object from array

JavascriptArraysEcmascript 6Javascript Objects

Javascript Problem Overview


I want to create an object from a list inside an array. I have an array which is dynamic and supposed to look like this:

var dynamicArray = ["2007", "2008", "2009", "2010"];

And I want to make an object like this with some JavaScript ES6:

const obj = {
    2007: {
        x: width / 5,
        y: height / 2
    },
    2008: {
        x: (2 / 5) * width,
        y: height / 2
    },
    2009: {
        x: (3 / 5) * width,
        y: height / 2
    },
    2010: {
        x: (4 / 5) * width,
        y: height / 2
    }
}

Don't worry about the inner objects. I just want to create a structure like this:

 obj = {
      2007: ...,
      2008: ...,
      ...
    }

Please help, thanks.

Javascript Solutions


Solution 1 - Javascript

Simply

 const obj = {};

 for (const key of yourArray) {
      obj[key] = whatever;
 }

or if you prefer "functional" style:

 const obj = yourArray.reduce((o, key) => Object.assign(o, {[key]: whatever}), {});

using the modern object spread operator:

const obj = yourArray.reduce((o, key) => ({ ...o, [key]: whatever}), {})

Example:

[
  { id: 10, color: "red" },
  { id: 20, color: "blue" },
  { id: 30, color: "green" }
].reduce((acc, cur) => ({ ...acc, [cur.color]: cur.id }), {})

Output:

{red: 10, blue: 20, green: 30}

Here is how it works:

reduce is initialized with an empty object (empty {} at the end), therefore first iteration variables are acc = {} cur = { id: 10, color: "red" }. Function returns an object - this is why function body is wrapped in parentheses => ({ ... }). Spread operator doesn't do anything on the first iteration, so red: 10 is set as first item.

On the second iteration variables are acc = { red: 10 } cur = { id: 20, color: "blue" }. Here the spread operator expands acc and the function returns { red: 10, blue: 20 }.

Third iteration acc = { red: 10, blue: 20 } cur = { id: 30, color: "green" }, so when acc is spread inside the object, our function returns the final value.

Solution 2 - Javascript

The new Object.fromEntries, from ECMAScript 2019, makes it even easier to transform values from an array into keys in an object like follows

const dynamicArray = ["2007", "2008", "2009", "2010"];
const obj = Object.fromEntries(
  dynamicArray.map(year => [year, {
    something: "based",
    on: year
  }])
)

console.log(obj)

Or maybe to solve your own original problem

const width = 1920 const height = 1080 const dynamicArray = ["2007", "2008", "2009", "2010"]; const obj = Object.fromEntries( dynamicArray.map((year, i) => [year, { x: (( i + 1) / 5) * width, y: height / 2 }]) )

console.log(obj)

Solution 3 - Javascript

in js with es6 reduce function for array I do it like this

let x = [1,2,3]
let y = x.reduce((acc, elem) => {
  acc[elem] = elem // or what ever object you want inside
  return acc
}, {})
console.log(y) // {1:1, 2:2, 3:3}

Solution 4 - Javascript

var keys = ['key1', 'key2', 'key3']

var object = Object.assign({}, ...Object.entries({...keys}).map(([a,b]) => ({ [b]: 'someValue' })))
console.log(object)

This will produce

{ key1: 'someValue', key2: 'someValue', key3: 'someValue' }

Solution 5 - Javascript

I found you can actually just use Object.assign() directly with the spread operator. No need to introduce any more complexity with a reduce or map function.

Simply do Object.assign(...yourArray, {}) and you will get your desired result. If you instead want to merge your array of objects into another object you can then also call Object.assign(...yourArray, yourObject) and it will also work just fine.

You can also use this same method to merge two arrays into one object, even if one of the arrays doesnt contain objects but only primitive values - however if you do this you need to make sure that at least one of the arrays hold only objects as a primitive will default to its index as the key, so you will get errors if there is a duplicate key.

However for OPs purpose there is no risk of such errors as he is merging with an empty object, which is the safest way.

const arr = [
  { a: 0 },
  { c: 1 },
  { e: 2 },
];

const obj = Object.assign({}, ...arr);

console.log(obj)

// Results to:
// Object { a: 0, c: 1, e: 2 }

Solution 6 - Javascript

Using forEach

const arrayKeys=['KEY1','KEY2','KEY3'];
let object={};
arrayKeys.forEach((key)=>{
      object[key]='property content'
}); 

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionHussain DehgamwalaView Question on Stackoverflow
Solution 1 - JavascriptgeorgView Answer on Stackoverflow
Solution 2 - JavascriptAbderrahmane TAHRI JOUTIView Answer on Stackoverflow
Solution 3 - JavascriptRalexrdzView Answer on Stackoverflow
Solution 4 - JavascriptAlokView Answer on Stackoverflow
Solution 5 - JavascriptAasmund Berge EndresenView Answer on Stackoverflow
Solution 6 - Javascriptdaniela betancourtView Answer on Stackoverflow