Array to object with Array.reduce()

javascript reduce array to object
javascript sum array of objects
javascript reduce object
map array to object javascript
javascript aggregate array of objects
typescript reduce
javascript reduce array of objects to array of strings
convert array of objects to object javascript

I have an array of key-value pairs:

const arr = [
  { key: 'One', value: '1' },
  { key: 'Two', value: '2' },
  { key: 'Three', value: '3' }
];

I would like to convert the above array into this kind of object:

const obj = {
  'One': '1',
  'Two': '2',
  'Three': '3'
}

by using the Array.reduce() function. This is what have I done so far:

const obj = arr.reduce( (prev, curr) => prev[curr.key] = curr.value, {} );

which is not working because, on the second run of the reduce function, prev is undefined and therefore I get this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'Two' of undefined

I thought I would be able to compose obj at each reduce iteration... What am I doing wrong?


You choose the right function, however, the only missing part was the value returned for each item was not the accumulator (object in our case). Ensuring this will fix your problem.

const arr = [{ key: 'One', value: '1' },{ key: 'Two', value: '2' },{ key: 'Three', value: '3' }];

const obj = arr.reduce( (prev, curr) => {
  prev[curr.key] = curr.value;
  return prev;
}, {});

console.log(obj);

Rewriting JavaScript: Converting an Array of Objects to an Object., Quick Tip: Transform an Array into an Object using .reduce() And you'd like to get an object with categories as keys, mapping to the article id's  reduce doesn't really fit the bill here as you're not trying to reduce the array to a single value. In a perfect world we would have multi-array map version, usually known as zip, that we could use like. const result = zipWith(optimisedRoute.slice(0, -1), optimisedRoute.slice(1), (start, end) => ( {start, end}));


You could use Object.assign inside the reduce method.

const arr = [{ key: 'One', value: '1' },{ key: 'Two', value: '2' },{ key: 'Three', value: '3' }];
const obj = arr.reduce( (prev, {key, value}) => Object.assign(prev, {[key]: value}), {} );
console.log(obj)

Quick Tip: Transform an Array into an Object using .reduce(), But unlike map and sort , which produce new arrays, reduce can boil an array down to a new value of any type. Their data is stored in an object like this:. Note: If you have not learned about Array.reduce() now is the time to do so. One of my past articles has links to resources about using Array.reduce() as well as an example and simple explanation.


You got undefined because prev doesn't have the attribute in prev[curr.key].

Here is my solution:

const arr = [
  { key: 'One', value: '1' },
  { key: 'Two', value: '2' },
  { key: 'Three', value: '3' }
];

const result = arr.reduce((prev, curr) => {
  return {
    ...prev,
    [curr.key]: curr.value
  }
}, {});

console.log(result);

Boiling Down Arrays with Array#reduce, After the first iteration your're returning a number and then trying to get property x of it to add to the next object which is undefined and maths involving undefined  Definition and Usage The reduce() method reduces the array to a single value. The reduce () method executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator (result/total).


You can destructure the the object to get the key and the value properties. Then use object spread, and computed property names to add the key and value to the prev object:

const arr = [
  { key: 'One', value: '1' },
  { key: 'Two', value: '2' },
  { key: 'Three', value: '3' }
];

const obj = arr.reduce( (prev, { key, value }) => ({ ...prev, [key]: value }), {});

console.log(obj);

Javascript reduce on array of objects, Combine mapping and filtering into one pass; and; Run asynchronous functions in sequence. Convert an array to an object. We can use .reduce()  You can convert an array into an object using one of these three methods: The Object.assign()function. Loop over the array and construct a new object. The reduce()function. We'll go over each of those methods in this article and provide some code examples for you to use on your website or application.


Functional JavaScript: How to use array reduce for more than just , Javascript array reduce() is an inbuilt method that executes the reducer function on each It is the array object the current element belongs to. @PaulKenjora Where it says const object = array.reduce array is the name of the variable with the original array, and object is the name of the variable you are assigning the new value to. It's already being called, and assigning the value to a new variable object . – sudo soul May 1 at 21:06


Javascript Array Reduce Example, The reduce() method executes a provided function for each value of the array (​from left-to-right). The return The array object the current element belongs to  The Object.assign () method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object. Object.assign( {}, ['a','b','c']); // {0:"a", 1:"b", 2:"c"} The own length property of the array is not copied because it isn't enumerable.


JavaScript Array reduce() Method, reduce() and Array.reduceRight() because of their flexibility and adaptability. These reduce functions iterate through each item in the array, while providing the​  Array.reduce() method. The reduce() method is also used to convert an array to an object, but we need to pass empty object {} as a second argument to it. Example: