Преобразовать массив объектов в объект в объекты

Question

У меня есть функция, которая возвращает мне массив объектов.Как мне манипулировать данными, чтобы вернуть мне объект объектов?

Ниже приведен мой пример:

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

Пожалуйста, советуйте.Я хочу, чтобы функция withMap возвращала мне структуру данных о том, как безMap возвращает.

Ожидаемая структура данных

{
  "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

Один из вариантов - использовать forEach и создать объект во время итерации:

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

Другой вариант - использовать 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

В этом решении используется reduce() с динамическими именами свойств и деструктуризацией:

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

Answer 3

.map() просто отобразит элементы в самом массиве, вы должны использовать .reduce(), чтобы уменьшить его до объекта.

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