根据ID对数组数据进行分组

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

[
{
stationId: "10"
name: "Jinbaolai"
group: {id: "18",stationGroupName: "Ali"}
},{
stationId: "13"
name: "Stack"
group: {id: "18",{
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"
},]
}
]


我想在化简器中进行分组逻辑，在那里我还设置了问题开始处显示的完整数据数组。

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进行尝试，但未成功。

执行此操作的最好方法是使用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

一个简单的JS算法可以为您完成

const list = [
{
stationId: "10",name: "Jinbaolai",group: {id: "18",stationGroupName: "Ali"}
},{
stationId: "13",name: "Stack",{
stationId: "20",name: "Overflow",group: {id: "19",stationGroupName: "Baba"}
}
];
const groups = {};
list.forEach((item) => {
const groupId = item.group.id;
const group = groups[groupId] || {groupId: groupId,groupName: item.group.stationGroupName,stations: []};
group.stations.push({stationId: item.stationId,name: item.name});
groups[groupId] = group;
});
const groupedArray = Object.keys(groups).map((groupId) => groups[groupId]);
console.log(groupedArray); // This will be the output you want

,

我认为链接多个功能会起作用。