在 vue.js 中加入 2 个具有相同字段名称的对象

Question

我正在尝试通过键连接 2 个对象，这些对象中有 2 个同名但值不同的字段。

var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : "player2",team:1}, { id : 'c', name : "player3",team:2}]
var teams = [{ id : 1, name : "LA"}, {id : 2, name: "IL"}]

我希望能够以这样的方式结束：

var mergedList = [{ id : 'a', name : "player1",team.id:1, team.name: "LA"},
          { id : 'b', name : "player2",team__id:1, team_name: "LA"},
          { id : 'c', name : "player3",team__id:2, team_name: "US"}]

这是我到目前为止尝试过的方法：

const mergedList = players.map((player) => ({
        ...player,
        ...teams.find((team) => team__id === player_team),
      }));

但是球员的姓名字段被球队的姓名字段所取代。

Answer 1

您需要为 teams 中的字段设置新的属性键。请记住，密钥不允许包含 .

const mergedList = players.map((player) => {
    const team = teams.find((team) => team.id === player.team);
    return {
        ...player,
        team_id: team?.id,
        team_name: team?.name,
    }
});

Answer 2

名称正在被替换，因为 Player 和 Team 对象都有 name 属性并且解决方案在组合对象时覆盖 name .

由于您想分别使用 team.id 和 team.name 访问 team 对象的 id 和 name，一个合适的解决方案是让团队播放器对象中的对象，例如：

var players = [{ id : 'a', name : "player1",team:1},{ id : 'b', name : "player2",team:1}, { id : 'c', name : "player3",team:2}]

var teams = [{ id : 1, name : "LA"}, {id : 2, name: "IL"}]

const mergedList = players.map((player) => ({
  ...player,
  team: teams.find((team) => team.id === player.team),
}));

mergedList.forEach(ele => {
 console.log(`${ele.id}, ${ele.name} is in team ${ele.team.id}, ${ele.team.name}`);
});

在 vue.js 中加入 2 个具有相同字段名称的对象

join 2 objects with the same field name in vue.js

javascript

join

node.js

vue.js