搜索
搜索

通过多个键对数组进行分组并更改键名 JavaScript

poPaTheGuru 发表于 Dev
10
教皇大师

我有一个array of objects：

[
  {
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '0745ad6f-7cfb-4d31-864a-55c1c47517ab',
    name: '[email protected] & [email protected]',
    userId: '0abe5edf-4d11-4edf-869f-d662497b95a9',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/1cbca5e505e7f8278034868b74304f03?d=wavatar'
  },
  {
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '0745ad6f-7cfb-4d31-864a-55c1c47517ab',
    name: '[email protected] & [email protected]',
    userId: '16dd8334-610e-4f03-893a-e5dfc7cdbf68',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/d219af79b45e5891507fda4c4c2139a0?d=wavatar'
  },
  {
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '653e2a5d-8d5d-405b-8d2c-75adccfafbb4',
    name: '[email protected] & [email protected]',
    userId: 'b12ffed0-198d-4c0e-ba74-b08674dd0f30',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/e8b9531d711b33d5de588e30373df98c?d=wavatar'
  },
  {
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '653e2a5d-8d5d-405b-8d2c-75adccfafbb4',
    name: '[email protected] & [email protected]',
    userId: 'e5550fae-125f-4a3b-b471-b0e17137ed3c',
    username: '[email protected]',
    image_url: 'string'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'aa98f822-b4c9-480c-ab31-d08245f8409c',
    name: '[email protected] & [email protected]',
    userId: '7e590328-dd17-4f20-8475-cff41d5f78db',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/0a7bacc193aadc85cca225742fb23b59?d=wavatar'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'aa98f822-b4c9-480c-ab31-d08245f8409c',
    name: '[email protected] & [email protected]',
    userId: '5eb9d5f0-4d1b-444c-b115-2a9c16a33403',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/01f74db6c7c09ab82daa12c02b3f06f6?d=wavatar'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'c242019b-9565-4a87-9b52-46f45b4421c8',
    name: '[email protected] & [email protected]',
    userId: 'af26d521-26b8-4fe6-93fa-cc44abcf4211',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/8ae4d2bd972405fcbe19f89428f51ad7?d=wavatar'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'c242019b-9565-4a87-9b52-46f45b4421c8',
    name: '[email protected] & [email protected]',
    userId: '89f1b2e9-7c49-4831-a461-4584674ca963',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/db02726a3f9015d4434f32092ee08f0c?d=wavatar'
  }
]

我想要group this array of objects based on similar keys，但我想要，change the name of the keys因为我的最终回复应该是这样的：

[
  {
    "id": "matchId",
    "firstTeam": {
      "id": "teamId",
      "name": "name",
      "firstPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      },
      "secondPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      }
    },
    "secondTeam": {
      "id": "teamId",
      "name": "name",
      "firstPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      },
      "secondPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      }
    }
  },
  {
    "id": "matchId",
    "firstTeam": {
      "id": "teamId",
      "name": "name",
      "firstPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      },
      "secondPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      }
    },
    "secondTeam": {
      "id": "teamId",
      "name": "name",
      "firstPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      },
      "secondPlayer": {
        "id": "userId",
        "username": "username",
        "imageURL": "image_url"
      }
    }
  }
]

正如您在初始数组中看到的那样，有an object for every player, whichtwo players stays in a team和 a match is consisted by two teams。

我尝试使用reduce，但它得到了我，它是键的更改名称（当然它不起作用）：

const finalResult = result.reduce((previousValue, currentValue) => {
                previousValue[currentValue.matchId] = previousValue[currentValue.matchId] || []
                previousValue.matchId = currentValue.matchId
                previousValue.firstTeam = {
                    id: currentValue.teamId,
                    name: currentValue.name,
                    firstPlayer: {
                        id: currentValue.userId,
                        username: currentValue.username,
                        imageURL: currentValue.image_url
                    },
                    secondPlayer: {
                        id: currentValue.userId,
                        username: currentValue.username,
                        imageURL: currentValue.image_url
                    }
                }

                return currentValue
            }, Object.create(null))

有什么办法可以做到这一点reduce吗？或任何其他方法

感谢您的时间！

尼克武

您可以检查以下实现reduce

const finalResult = data.reduce((result, currentValue) => {
  const foundMatch = result.find(item => item.id === currentValue.matchId)
  if (!foundMatch) {
    //add a new match with a new team along with the first player
    result.push({
      id: currentValue.matchId,
      firstTeam: createTeam(currentValue),
    })
  } else {
    if (foundMatch.firstTeam.id === currentValue.teamId) {
      //create the second player in the first team
      foundMatch.firstTeam.secondPlayer = createPlayer(currentValue)
      return result
    }

    if (!foundMatch.secondTeam) {
      //create the second team along with the first player
      foundMatch.secondTeam = createTeam(currentValue)
    } else {
      //create the second player in the second team
      foundMatch.secondTeam.secondPlayer = createPlayer(currentValue)
    }
  }

  return result
}, [])

完全集成

const data = [{
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '0745ad6f-7cfb-4d31-864a-55c1c47517ab',
    name: '[email protected] & [email protected]',
    userId: '0abe5edf-4d11-4edf-869f-d662497b95a9',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/1cbca5e505e7f8278034868b74304f03?d=wavatar'
  },
  {
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '0745ad6f-7cfb-4d31-864a-55c1c47517ab',
    name: '[email protected] & [email protected]',
    userId: '16dd8334-610e-4f03-893a-e5dfc7cdbf68',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/d219af79b45e5891507fda4c4c2139a0?d=wavatar'
  },
  {
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '653e2a5d-8d5d-405b-8d2c-75adccfafbb4',
    name: '[email protected] & [email protected]',
    userId: 'b12ffed0-198d-4c0e-ba74-b08674dd0f30',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/e8b9531d711b33d5de588e30373df98c?d=wavatar'
  },
  {
    matchId: 'f9120918-d2bf-4f5a-ab03-82fdeca9770f',
    teamId: '653e2a5d-8d5d-405b-8d2c-75adccfafbb4',
    name: '[email protected] & [email protected]',
    userId: 'e5550fae-125f-4a3b-b471-b0e17137ed3c',
    username: '[email protected]',
    image_url: 'string'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'aa98f822-b4c9-480c-ab31-d08245f8409c',
    name: '[email protected] & [email protected]',
    userId: '7e590328-dd17-4f20-8475-cff41d5f78db',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/0a7bacc193aadc85cca225742fb23b59?d=wavatar'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'aa98f822-b4c9-480c-ab31-d08245f8409c',
    name: '[email protected] & [email protected]',
    userId: '5eb9d5f0-4d1b-444c-b115-2a9c16a33403',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/01f74db6c7c09ab82daa12c02b3f06f6?d=wavatar'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'c242019b-9565-4a87-9b52-46f45b4421c8',
    name: '[email protected] & [email protected]',
    userId: 'af26d521-26b8-4fe6-93fa-cc44abcf4211',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/8ae4d2bd972405fcbe19f89428f51ad7?d=wavatar'
  },
  {
    matchId: 'c902a62a-0f33-45ad-9e2e-596bf91f3a9c',
    teamId: 'c242019b-9565-4a87-9b52-46f45b4421c8',
    name: '[email protected] & [email protected]',
    userId: '89f1b2e9-7c49-4831-a461-4584674ca963',
    username: '[email protected]',
    image_url: 'https://www.gravatar.com/avatar/db02726a3f9015d4434f32092ee08f0c?d=wavatar'
  }
]

const createPlayer = ({
  userId,
  username,
  image_url
}) => {
  return {
    "id": userId,
    "username": username,
    "imageURL": image_url
  }
}

const createTeam = ({
  teamId,
  name,
  ...otherData
}) => {
  return {
    id: teamId,
    name: name,
    firstPlayer: createPlayer(otherData)
  }
}

const finalResult = data.reduce((result, currentValue) => {
  const foundMatch = result.find(item => item.id === currentValue.matchId)
  if (!foundMatch) {
    //add a new match with a new team along with the first player
    result.push({
      id: currentValue.matchId,
      firstTeam: createTeam(currentValue),
    })
  } else {
    if (foundMatch.firstTeam.id === currentValue.teamId) {
      //create the second player in the first team
      foundMatch.firstTeam.secondPlayer = createPlayer(currentValue)
      return result
    }

    if (!foundMatch.secondTeam) {
      //create the second team along with the first player
      foundMatch.secondTeam = createTeam(currentValue)
    } else {
      //create the second player in the second team
      foundMatch.secondTeam.secondPlayer = createPlayer(currentValue)
    }
  }

  return result
}, [])

console.log(finalResult)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何通过JavaScript中的对象键之一对数组进行分组

如何基于Javascript / Jquery中的多个键对数组项进行分组

如何在javascript中基于多个键对数组进行分组和转换？

按多个对象对数组进行分组 - JavaScript

在 Javascript 中通过多个嵌套数组进行交互

如何在Javascript中使用reduce（）通过多个“列/标准”对二维数组进行求和/分组？

通过相同的键对JavaScript数组对象进行分组

对数组值进行分组 Javascript

如何通过多个键对JSON数组数据进行分组

如何通过PHP中的多个键对数组进行分组

如何通过Javascript中的唯一属性对数组中的对象进行分组？

通过子字符串JavaScript对数组的元素进行分组

JavaScript算法，用于通过多个条件对对象中的数组进行排序

通过嵌套键对数组进行分组

如何在javascript中对数组进行分组？

Javascript：根据值对数组中的相似项进行分组

按值对数组对象进行分组 - javascript

使用JavaScript中的对象对数组项进行分组

根据使用JavaScript的相同元素对数组进行分组

如何在JavaScript中对数组条目进行分组

如何基于Javascript中的多个键对对象数组进行分组？

在javascript中使用名称键对数组进行排序

通过多个键对数组对象求和

在JavaScript中按多个对象属性对数组进行排序

JavaScript按多个（数字）字段对数组进行排序

Javascript-按多个条件对数组进行排序

使用lodash通过多个键对对象进行分组

通过多个键对字典列表进行分组和汇总

通过多个键对Spark类型安全的聚合进行分组

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档