Create object from array

by

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.

More Related Contents:

  1. How to find duplicate values in a JavaScript array of objects, and output only unique values?
  2. How do I check if an array includes a value in JavaScript?
  3. How can I check if an object is an array? [duplicate]
  4. How to map more than one property from an array of objects
  5. javascript extract certain properties from all objects in array
  6. Sum of array object property values in new array of objects in Javascript [duplicate]
  7. Create an empty object in JavaScript with {} or new Object()?
  8. Why are Objects not Iterable in JavaScript?
  9. Filtering an array with a function that returns a promise
  10. Comparing two arrays of objects, and exclude the elements who match values into new array in JS
  11. How to generate range of numbers from 0 to n in ES2015 only?
  12. Using Array objects as key for ES6 Map
  13. What’s the difference between “{}” and “[]” while declaring a JavaScript array?
  14. Convert ES6 Iterable to Array
  15. Maps vs Objects in ES6, When to use?
  16. Get list of duplicate objects in an array of objects
  17. Search array of objects for entry matching variable and check if it matches other fields
  18. Returning only certain properties from an array of objects in Javascript [duplicate]
  19. Extract certain properties from all objects in array
  20. How to merge each object within arrays by index?
  21. Is this a good way to clone an object in ES6?
  22. Unexpected comma using map()
  23. Find all values by specific key in a deep nested object
  24. How to create an array of objects from multiple arrays
  25. Array.from() vs spread syntax
  26. How to convert array of key–value objects to array of objects with a single property?
  27. How to delete property from spread operator?
  28. How to get all keys with values from nested objects
  29. Compare two Arrays with Objects and create new array with unmatched objects
  30. flattening the nested object in javascript

Leave a Comment