How to convert array into array of objects using map() and reduce() in JavaScript

Converting arrays into arrays of objects is a common task in JavaScript. This article shows how to use map() and reduce() together to transform nested arrays into structured objects.

Problem Statement

Suppose we have an array of arrays like this:

const arr = [
   [
      ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
   ],
   [
      ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
   ]
];

We need to convert this nested array structure into an array of objects where each inner array becomes an object with key-value pairs.

The expected output should look like this:

const output = [
   {juice: 'apple', maker: 'motts', price: 12},
   {juice: 'orange', maker: 'sunkist', price: 11}
];

Using map() and reduce() Together

The map() method creates a new array by transforming each element, while reduce() accumulates values into a single result. Combined, they can convert each sub-array into an object:

const arr = [
   [
      ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
   ],
   [
      ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
   ]
];

const arrayToObject = arr => {
   return arr.map(list => {
      return list.reduce((acc, val) => {
         acc[val[0]] = val[1];
         return acc;
      }, {});
   });
};

console.log(arrayToObject(arr));

[
   { juice: 'apple', maker: 'motts', price: 12 },
   { juice: 'orange', maker: 'sunkist', price: 11 }
]

How It Works

The transformation happens in two steps:

1. map(): Iterates through each sub-array in the main array
2. reduce(): For each sub-array, builds an object by using the first element as key and second as value

Simplified Arrow Function Version

We can make this more concise using arrow functions:

const arr = [
   [
      ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
   ],
   [
      ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
   ]
];

const arrayToObject = arr => 
   arr.map(list => 
      list.reduce((acc, [key, value]) => ({...acc, [key]: value}), {})
   );

console.log(arrayToObject(arr));

[
   { juice: 'apple', maker: 'motts', price: 12 },
   { juice: 'orange', maker: 'sunkist', price: 11 }
]

Alternative: Using Object.fromEntries()

For modern JavaScript environments, Object.fromEntries() provides a cleaner approach:

const arr = [
   [
      ['juice', 'apple'], ['maker', 'motts'], ['price', 12]
   ],
   [
      ['juice', 'orange'], ['maker', 'sunkist'], ['price', 11]
   ]
];

const arrayToObject = arr => arr.map(list => Object.fromEntries(list));

console.log(arrayToObject(arr));

[
   { juice: 'apple', maker: 'motts', price: 12 },
   { juice: 'orange', maker: 'sunkist', price: 11 }
]

Conclusion

Both map() with reduce() and Object.fromEntries() effectively convert nested arrays to objects. Choose Object.fromEntries() for cleaner code when browser support allows, or use the reduce() approach for broader compatibility.