Convert array of objects to object to objects

Question

I have a function that returns me an array of objects. How do I manipulate the data to return me an object of objects?

Below is my example:

const includedStates = ['NJ', 'NY'];
const withoutMap = () => {
 return {
 "NJ": {
 fill: "red",
 clickHandler: (event) => console.log('Custom handler for NJ', event.target.dataset.name)
 },
 "NY": {
 fill: "red",
 clickHandler: (event) => console.log('Custom handler for NY', event.target.dataset.name)
 }
 };
};
const withMap = () => {
 return includedStates.map(item => {
 return {
 [item]: 'red',
 clickHandler: (event) => console.log(event.target.dataset.name)
 }
 })
};
console.log('withoutMap =>', withoutMap());
console.log('withMap =>', withMap())

Please advice. I want the withMap function to return me the datastructure of how withoutMap returns.

The datastructure I expect is

{
 "NJ": {
 "fill": "red",
 "clickHandler": (event) => console.log('Custom handler for NJ', event.target.dataset.name)
 },
 "NY": {
 "fill": "red",
 "clickHandler": (event) => console.log('Custom handler for NY', event.target.dataset.name)
 }
}

Answer 1

One option is to use forEach and construct an object as you're iterating:

const includedStates = ['NJ', 'NY'];
const withoutMap = () => {
 return {
 "NJ": {
 fill: "red",
 clickHandler: (event) => console.log('Custom handler for NJ', event.target.dataset.name)
 },
 "NY": {
 fill: "red",
 clickHandler: (event) => console.log('Custom handler for NY', event.target.dataset.name)
 }
 };
};
const withMap = () => {
 const result = {}
 includedStates.forEach(item => {
 result[item] = {
 [item]: 'red',
 clickHandler: (event) => console.log(event.target.dataset.name)
 }
 })
 
 return result;
};
console.log('withoutMap =>', withoutMap());
console.log('withMap =>', withMap())

Another option is to use reduce:

const includedStates = ['NJ', 'NY'];
const withoutMap = () => {
 return {
 "NJ": {
 fill: "red",
 clickHandler: (event) => console.log('Custom handler for NJ', event.target.dataset.name)
 },
 "NY": {
 fill: "red",
 clickHandler: (event) => console.log('Custom handler for NY', event.target.dataset.name)
 }
 };
};
const withMap = () => {
 return includedStates.reduce((result, item) => {
 result[item] = {
 [item]: 'red',
 clickHandler: (event) => console.log(event.target.dataset.name)
 }
 return result;
 }, {})
};
console.log('withoutMap =>', withoutMap());
console.log('withMap =>', withMap())

Answer 2

.map() will just map the elements in the array itself, you should use .reduce() to reduce it to an object.

const includedStates = ['NJ', 'NY'];
const withReduce = () => {
 return includedStates.reduce((result, item) => {
 result[item] = {
 fill: 'red',
 clickHandler: (event) => console.log(event.target.dataset.name)
 };
 return result;
 },{});
};
console.log('withReduce =>', withReduce())

Answer 3

This solution uses reduce() with dynamic property names and destructuring:

const includedStates = ['NJ', 'NY'];
const withMap = () => includedStates.reduce((result, item) => ({
 ...result,
 [item]: {
 fill: 'red',
 clickHandler: (event) => console.log(event.target.dataset.name)
 }
 }), {});
console.log('withMap =>', withMap());