Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
456 views
in Technique[技术] by (71.8m points)

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: "微信", ...}, {...}]
},
..........
]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
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": "热门"
          }
        ]
      }
    ]
  }
]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to WuJiGu Developer Q&A Community for programmer and developer-Open, Learning and Share
...