问答

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

作者:admin 2021-07-23 我要评论

以下数据为示例数据(模仿真实数据) let arr = [ { id: 1, name: "微信", webSiteAndTypes: [ { fkWebsiteTypeId: 1, groupName: "聊天软件" }, { fkWebsiteTyp...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

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)

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • js 对象数组根据如何某个属性进行分组

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

  • Flutter module add-to-app调用Andr

    Flutter module add-to-app调用Andr

  • 通过SmtpClient发送Exchange会议邮件,

    通过SmtpClient发送Exchange会议邮件,

  • 如何 设置  express 响应头的 set-cook

    如何 设置 express 响应头的 set-cook

腾讯云代理商
海外云服务器