javascript - 根据id对数组数据进行分组

Question

通过 API 调用，我收到如下响应

[
  {
    stationId: "10"
    name: "Jinbaolai"
    group: {id: "18", stationGroupName: "Ali"}
  },
  {
    stationId: "13"
    name: "Stack"
    group: {id: "18", stationGroupName: "Ali"}
  },
  {
    stationId: "20"
    name: "Overflow"
    group: {id: "19", stationGroupName: "Baba"}
  }

]

正如您所看到的，前两条记录属于同一组。我想根据组对这些数据进行分组。例如，它应该看起来像这样

[
  {
    groupId: "18",
    groupName : "Ali",
    stations : [
                 {
                  stationId: "10",
                  name: "Jinbaolai"
                 },
                 {
                  stationId: "13",
                  name: "Stack"
                 }
               ]

  },
  {
    groupId: "19",
    groupName : "Baba",
    stations : [
                 {
                  stationId: "20",
                  name: "Overflow"
                 },
               ]

  }

]

我想在我的 reducer 中执行分组逻辑，其中我还设置了问题开头所示的完整数据数组。

            case EVC_SUCCESS:
            return {
                ...state,
                chargingStations: action.evcData.chargingStations,
                chargingStationGroups: //This is where my logic should go. ('action.evcData.chargingStations' is the initial data array)
                tableLoading: false
            }

我该怎么做？我尝试使用 filter 但没有成功。

Answer 1

最好的方法是使用 Array.prototype.reduce()

Reduce 是一个聚合函数，您可以在其中放入一些内容的数组并返回单个值。

可能有一个起始值作为最后一个参数，就像我使用的{}一样。 签名是 reduce(fn,startingValue)，其中 fn 是一个带有两个参数 aggregate 和 currentValue 的函数，其中您可以最后返回聚合。

const groupData = (data)=> {

    return Object.values(data.reduce((group,n)=>{
    if (!group[n.group.id]){
        group[n.group.id] = {
      groupId:n.group.id,
      groupName: n.group.stationGroupName,
      stations:[]}
    } 
    group[n.group.id].stations.push({
      stationID: n.stationId,
      name: n.name
    })
    return group;
  }, {}))

}

这是fiddle