JSON: 当对象具有相同的日期时,将它们放入数组中,并将数组与 javascript 中的对象中的日期一起保存

JSON: put object into an array when they have the same date and keep the array with the date in an object in javascript

所以我有

  const att = [
    {
      date: '2022-11-04',
      attendance: [{ playerName: 'Play Last', status: 'present' }],
    },
    {
      date: '2022-11-04',
      attendance: [{ playerName: 'New Player Jona', status: 'absent' }],
    },
    {
      date: '2022-11-04',
      attendance: [{ playerName: 'Jona Hysi', status: 'present' }],
    },
    {
      date: '2022-11-04',
      attendance: [{ playerName: 'Jurgen Tafaj', status: 'present' }],
    },
    {
      date: '2022-12-04',
      attendance: [{ playerName: 'Play Last', status: 'present' }],
    },
    {
      date: '2022-12-04',
      attendance: [{ playerName: 'New Player Jona', status: 'sick' }],
    },
    {
      date: '2022-12-04',
      attendance: [{ playerName: 'Jona Hysi', status: 'present' }],
    },
    {
      date: '2022-12-04',
      attendance: [{ playerName: 'Jurgen Tafaj', status: 'present' }],
    },
    {
      date: '2022-04-14',
      attendance: [{ playerName: 'Play Last', status: 'present' }],
    },
    {
      date: '2022-04-14',
      attendance: [{ playerName: 'New Player Jona', status: 'present' }],
    },
    {
      date: '2022-04-14',
      attendance: [{ playerName: 'Jona Hysi', status: 'present' }],
    },
    {
      date: '2022-04-14',
      attendance: [{ playerName: 'Jurgen Tafaj', status: 'present' }],
    },
  ];

我想把它变成

  const final = [
    {
      date: '2022-11-04',
      attendance: [
        { playerName: 'Play Last', status: 'present' },
        { playerName: 'New Player Jona', status: 'absent' },
        { playerName: 'Jona Hysi', status: 'present' },
        { playerName: 'Jurgen Tafaj', status: 'present' },
      ],
    },
    {
      date: '2022-12-04',
      attendance: [
        { playerName: 'Play Last', status: 'present' },
        { playerName: 'New Player Jona', status: 'sick' },
        { playerName: 'Jona Hysi', status: 'present' },
        { playerName: 'Jurgen Tafaj', status: 'present' },
      ],
    },
    {
      date: '2022-04-14',
      attendance: [
        { playerName: 'Play Last', status: 'present' },
        { playerName: 'New Player Jona', status: 'present' },
        { playerName: 'Jona Hysi', status: 'present' },
        { playerName: 'Jurgen Tafaj', status: 'present' },
      ],
    },
  ];

所以我想在对象具有相同的日期时将对象推送到数组中,并以日期和该日期的所有出席人数结束

我试过: 但那不是一个包含对象的数组并且当它们具有相同的名称时(我参加了每个对象并且示例具有不同的名称)

我在这里设立了工作场所:https://stackblitz.com/edit/react-vu27ry

使用 Array#reduce, iterate over the array while updating a Map,其中 key 是日期,value 是出勤数组。最后,地图值将是分组对象的列表

const arr = [
  {
    date: '2022-11-04',
    attendance: [{ playerName: 'Play Last', status: 'present' }]
  },
  {
    date: '2022-11-04',
    attendance: [{ playerName: 'New Player Jona', status: 'absent' }]
  },
  {
    date: '2022-11-04',
    attendance: [{ playerName: 'Jona Hysi', status: 'present' }]
  },
  {
    date: '2022-11-04',
    attendance: [{ playerName: 'Jurgen Tafaj', status: 'present' }]
  },
  {
    date: '2022-12-04',
    attendance: [{ playerName: 'Play Last', status: 'present' }]
  },
  {
    date: '2022-12-04',
    attendance: [{ playerName: 'New Player Jona', status: 'sick' }]
  },
  {
    date: '2022-12-04',
    attendance: [{ playerName: 'Jona Hysi', status: 'present' }]
  },
  {
    date: '2022-12-04',
    attendance: [{ playerName: 'Jurgen Tafaj', status: 'present' }]
  },
  {
    date: '2022-04-14',
    attendance: [{ playerName: 'Play Last', status: 'present' }]
  },
  {
    date: '2022-04-14',
    attendance: [{ playerName: 'New Player Jona', status: 'present' }]
  },
  {
    date: '2022-04-14',
    attendance: [{ playerName: 'Jona Hysi', status: 'present' }]
  },
  {
    date: '2022-04-14',
    attendance: [{ playerName: 'Jurgen Tafaj', status: 'present' }]
  }
];

const res = [...
  arr.reduce((map, { date, attendance = [] }) => {
    const { attendance: dateAttendance = [] } = map.get(date) ?? {};
    map.set(date, { date, attendance: [...dateAttendance, ...attendance] });
    return map;
  }, new Map)
  .values()
];

console.log(res);