Как объединить элементы массива с объектами по общему значению?

Question

[Александр]

Делаю приложение на React, которое выводит погоду с помощью API OpenWeatherMap. API возвращает прогноз в примерно таком виде:

[
    {dt: "2020-01-22 12:00", weather: "..."},
    {dt: "2020-01-22 16:00", weather: "..."},
    {dt: "2020-01-23 12:00", weather: "..."},
    {dt: "2020-01-23 16:00", weather: "..."},
    {dt: "2020-01-24 12:00", weather: "..."},
    {dt: "2020-01-24 16:00", weather: "..."},
    ...
]

Время API возвращает в Unix, для удобства тут написал в своем виде. Время потом парсится с помощью Datе и используется в компоненте
Нужно объединить элементы массива с одинаковым днём в свой массив, чтобы потом распределить прогноз по дням.
Хочу на выходе получить такой массив:

[
    [
        {dt: "2020-01-22 12:00", weather: "..."},
        {dt: "2020-01-22 16:00", weather: "..."},
    ],
    [
        {dt: "2020-01-23 12:00", weather: "..."},
        {dt: "2020-01-23 16:00", weather: "..."},
    ],
    [
        {dt: "2020-01-24 12:00", weather: "..."},
        {dt: "2020-01-24 16:00", weather: "..."},
    ],
    ...
]

Нужен готовый пример или хотя бы подсказка.

Comments

[Alams Stoyne]

проходи по массиву
через split данных dt получай дату (день)
формируй новый массив

Answer 1

[0xD34F]

const groupedArr = useMemo(() => {
  return Object.values(arr.reduce((acc, { dt, weather }) => {
    const [ date, time ] = dt.split(' ');
    acc[date] = acc[date] || { date, weather: [] };
    acc[date].weather.push({ time, weather });
    return acc;
  }, {}));
}, [ arr ]);

<ul>{groupedArr.map(n => (
  <li>
    <h3>{n.date}</h3>
    <ul>{n.weather.map(m => (
      <li>
        {m.time} - {m.weather}
      </li>))}
    </ul>
  </li>))}
</ul>