js 对象数组根据如何某个属性进行分组(该属性是个数组)

以下数据为示例数据(模仿真实数据)

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: "微信", ...}, {...}]
},
..........
]
阅读 5.9k
2 个回答
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)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题