以下数据为示例数据(模仿真实数据)
let arr = [
{ id: 1, name: "微信", webSiteAndTypes: [
{ fkWebsiteTypeId: 1, groupName: "聊天软件" },
{ fkWebsiteTypeId: 9, groupName: "热门" },
{ fkWebsiteTypeId: 10, groupName: "常用软件" }
] },
{ id: 2, name: "钉钉", webSiteAndTypes: [
{ fkWebsiteTypeId: 2, groupName: "办公软件" },
{ fkWebsiteTypeId: 9, groupName: "热门" },
{ fkWebsiteTypeId: 10, groupName: "常用软件" }
] },
{ id: 3, name: "美团", webSiteAndTypes: [
{ fkWebsiteTypeId: 5, groupName: "生活便利" },
{ fkWebsiteTypeId: 9, groupName: "热门" },
] },
{ id: 4, name: "智行火车票", webSiteAndTypes: [
{ fkWebsiteTypeId: 4, groupName: "出行软件" },
{ fkWebsiteTypeId: 9, groupName: "热门" }
] },
{ id: 5, name: "淘宝", webSiteAndTypes: [
{ fkWebsiteTypeId: 6, groupName: "购物软件" },
{ fkWebsiteTypeId: 10, groupName: "常用软件" },
{ fkWebsiteTypeId: 9, groupName: "热门" }
] },
{ id: 6, name: "京东", webSiteAndTypes: [
{ fkWebsiteTypeId: 6, groupName: "购物软件" },
{ fkWebsiteTypeId: 10, groupName: "常用软件" },
{ fkWebsiteTypeId: 9, groupName: "热门" }
] },
]
如何将以上的数据转换为以下的格式内容,一条内容会对应多个分组(大佬请留步):
[{
groupName: "热门",
fkWebsiteTypeId: 9,
websites: [{id: 1, name: "微信", ...}, {...}]
}, {
groupName: "常用软件",
fkWebsiteTypeId: 2,
websites: [{...}]
}, {
groupName: "出行软件",
fkWebsiteTypeId: 4,
websites: [...]
},
, {
groupName: "聊天软件",
fkWebsiteTypeId: 1,
websites: [{id: 1, name: "微信", ...}, {...}]
},
..........
]
###
function group (list) {
const map = {}, result = []
list.forEach(item => {
item.webSiteAndTypes.forEach(({ fkWebsiteTypeId, groupName }) => {
if (!map[fkWebsiteTypeId]) {
map[fkWebsiteTypeId] = { groupName, fkWebsiteTypeId, websites: [] }
result.push(map[fkWebsiteTypeId])
}
map[fkWebsiteTypeId].websites.push(item)
})
})
return result
}
测试
let r = group(arr)
输出:
[
{
"groupName": "聊天软件",
"fkWebsiteTypeId": 1,
"websites": [
{
"id": 1,
"name": "微信",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 1,
"groupName": "聊天软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
}
]
}
]
},
{
"groupName": "热门",
"fkWebsiteTypeId": 9,
"websites": [
{
"id": 1,
"name": "微信",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 1,
"groupName": "聊天软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
}
]
},
{
"id": 2,
"name": "钉钉",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 2,
"groupName": "办公软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
}
]
},
{
"id": 3,
"name": "美团",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 5,
"groupName": "生活便利"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
},
{
"id": 4,
"name": "智行火车票",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 4,
"groupName": "出行软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
},
{
"id": 5,
"name": "淘宝",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 6,
"groupName": "购物软件"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
},
{
"id": 6,
"name": "京东",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 6,
"groupName": "购物软件"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
}
]
},
{
"groupName": "常用软件",
"fkWebsiteTypeId": 10,
"websites": [
{
"id": 1,
"name": "微信",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 1,
"groupName": "聊天软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
}
]
},
{
"id": 2,
"name": "钉钉",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 2,
"groupName": "办公软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
}
]
},
{
"id": 5,
"name": "淘宝",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 6,
"groupName": "购物软件"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
},
{
"id": 6,
"name": "京东",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 6,
"groupName": "购物软件"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
}
]
},
{
"groupName": "办公软件",
"fkWebsiteTypeId": 2,
"websites": [
{
"id": 2,
"name": "钉钉",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 2,
"groupName": "办公软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
}
]
}
]
},
{
"groupName": "生活便利",
"fkWebsiteTypeId": 5,
"websites": [
{
"id": 3,
"name": "美团",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 5,
"groupName": "生活便利"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
}
]
},
{
"groupName": "出行软件",
"fkWebsiteTypeId": 4,
"websites": [
{
"id": 4,
"name": "智行火车票",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 4,
"groupName": "出行软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
}
]
},
{
"groupName": "购物软件",
"fkWebsiteTypeId": 6,
"websites": [
{
"id": 5,
"name": "淘宝",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 6,
"groupName": "购物软件"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
},
{
"id": 6,
"name": "京东",
"webSiteAndTypes": [
{
"fkWebsiteTypeId": 6,
"groupName": "购物软件"
},
{
"fkWebsiteTypeId": 10,
"groupName": "常用软件"
},
{
"fkWebsiteTypeId": 9,
"groupName": "热门"
}
]
}
]
}
]
###let repeat = {}
let result = arr.reduce((list, item) => {
item.webSiteAndTypes.forEach(subItem => {
if (!repeat[subItem.fkWebsiteTypeId]) {
let listItem = {
groupName: subItem.groupName,
fkWebsiteTypeId: subItem.fkWebsiteTypeId,
websites: [
{
id: item.id,
name: item.name
}
]
}
list.push(listItem)
repeat[subItem.fkWebsiteTypeId] = true
} else {
for (let currItem of list) {
if (currItem.fkWebsiteTypeId == subItem.fkWebsiteTypeId) {
currItem.websites.push({
id: item.id,
name: item.name
})
}
}
}
})
return list
}, [])
console.log(result)