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)
  }
}

skovy · Accepted Answer · 2019-09-20 02:30:28Z

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())

Vandesh · Accepted Answer · 2019-09-20 02:38:19Z

0

.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())

answered Sep 20, 2019 at 2:38

Vandesh

6,9642 gold badges31 silver badges38 bronze badges

Comments

Robby Cornelissen · Accepted Answer · 2019-09-20 02:38:31Z

0

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());

answered Sep 20, 2019 at 2:38

Robby Cornelissen

98.5k23 gold badges154 silver badges180 bronze badges

Collectives™ on Stack Overflow

Convert array of objects to object to objects

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related