javascript - 如何有效地连接 2 个 json 文件的数据？

Question

我有 2 个用 jquery 导入的 json 文件，基本上想将 2 个数组合并为 1 个数组。这是 json 文件的样子:

玩家.json

{
    "players": [
        {
            "id": 109191123,
            "surname": "Farah",
            "full_name": "Robbie Farah",
            "short_name": "R. Farah",
            "other_names": "Robert",
            "jumper_number": 9,
            "position_code": "CEN1",
            "position_order": 9,
            "position_description": "Hooker",
            "is_captain": false,
            "is_interchange": false
        },
        {
            "id": 109509,
            "surname": "Rapana",
            "full_name": "Jordan Rapana",
            "short_name": "J. Rapana",
            "other_names": "Jordan",
            "jumper_number": 1,
            "position_code": "FBCK",
            "position_order": 1,
            "position_description": "Full Back",
            "is_captain": false,
            "is_interchange": false
        },
        {
            "id": 111285,
            "surname": "Waqa",
            "full_name": "Sisa Waqa",
            "short_name": "S. Waqa",
            "other_names": "Sisa",
            "jumper_number": 2,
            "position_code": "WING1",
            "position_order": 2,
            "position_description": "Wing",
            "is_captain": false,
            "is_interchange": false
        },
        {
            "id": 109861,
            "surname": "Croker",
            "full_name": "Jarrod Croker",
            "short_name": "J. Croker",
            "other_names": "Jarrod",
            "jumper_number": 3,
            "position_code": "CEN1",
            "position_order": 3,
            "position_description": "Centre",
            "is_captain": true,
            "is_interchange": false
        },
        {
            "id": 112814,
            "surname": "Lee",
            "full_name": "Edrick Lee",
            "short_name": "E. Lee",
            "other_names": "Edrick",
            "jumper_number": 5,
            "position_code": "CEN2",
            "position_order": 4,
            "position_description": "Centre",
            "is_captain": false,
            "is_interchange": false
        }
    ]
}

统计.json

  {
    "player_stats": [
        {
            "id": 112814,
            "matches": "123",
            "tries": "11"
        },
        {
            "id": 111285,
            "matches": "234",
            "tries": "22"
        },
        {
            "id": 109861,
            "matches": "345",
            "tries": "33"
        },
        {
            "id": 109509,
            "matches": "456",
            "tries": "44"
        },
        {
            "id": 109510,
            "matches": "567",
            "tries": "55"
        }
    ]
}

我目前正在寻找将数据连接到一个新数组中的方法，因此其中一项看起来像:

{
   player:'Lee',
   matches:123,
   tried:11
}

基本上“连接”来自 json 文件的两个数据。

目前有 2 个 json 文件的导入，然后遍历两个数组以尝试在 id 属性上找到匹配项。有没有更有效的方法来做到这一点最好使用 vanilla js/jquery？

var players, stats, items = [];
    $.getJSON("data/players.json", function (data) {
        $.each(data, function (key, players) {
            $.getJSON("data/stats.json", function (data) {
                $.each(data, function (key, stats) {
                    //check stats available for players:
                    for (var i = 0; i < players.length; i++) {
                        for (var j = 0; j < stats.length; j++) {
                            var exists = items.some(function (item) {
                                return (item.player === players[i].full_name)
                            })
                            if (players[i].id === stats[j].id && !exists) {
                                items.push({
                                    player: players[i].full_name,
                                    matches: stats[j].matches,
                                    tries: stats[j].tries,
                                })
                            }
                        }
                    }

                });

            });
        });

    });

Answer 1

您可以结合使用 .map 和 .find

var players = {
  "players": [{
      "id": 109191123,
      "surname": "Farah",
      "full_name": "Robbie Farah",
      "short_name": "R. Farah",
      "other_names": "Robert",
      "jumper_number": 9,
      "position_code": "CEN1",
      "position_order": 9,
      "position_description": "Hooker",
      "is_captain": false,
      "is_interchange": false
    },
    {
      "id": 109509,
      "surname": "Rapana",
      "full_name": "Jordan Rapana",
      "short_name": "J. Rapana",
      "other_names": "Jordan",
      "jumper_number": 1,
      "position_code": "FBCK",
      "position_order": 1,
      "position_description": "Full Back",
      "is_captain": false,
      "is_interchange": false
    },
    {
      "id": 111285,
      "surname": "Waqa",
      "full_name": "Sisa Waqa",
      "short_name": "S. Waqa",
      "other_names": "Sisa",
      "jumper_number": 2,
      "position_code": "WING1",
      "position_order": 2,
      "position_description": "Wing",
      "is_captain": false,
      "is_interchange": false
    },
    {
      "id": 109861,
      "surname": "Croker",
      "full_name": "Jarrod Croker",
      "short_name": "J. Croker",
      "other_names": "Jarrod",
      "jumper_number": 3,
      "position_code": "CEN1",
      "position_order": 3,
      "position_description": "Centre",
      "is_captain": true,
      "is_interchange": false
    },
    {
      "id": 112814,
      "surname": "Lee",
      "full_name": "Edrick Lee",
      "short_name": "E. Lee",
      "other_names": "Edrick",
      "jumper_number": 5,
      "position_code": "CEN2",
      "position_order": 4,
      "position_description": "Centre",
      "is_captain": false,
      "is_interchange": false
    }
  ]
}

var stats = {
  "player_stats": [{
      "id": 112814,
      "matches": "123",
      "tries": "11"
    },
    {
      "id": 111285,
      "matches": "234",
      "tries": "22"
    },
    {
      "id": 109861,
      "matches": "345",
      "tries": "33"
    },
    {
      "id": 109509,
      "matches": "456",
      "tries": "44"
    },
    {
      "id": 109510,
      "matches": "567",
      "tries": "55"
    }
  ]
}


var result = stats.player_stats.map(s => {
  var match = players.players.find(p => p.id == s.id);
  var name = "";

  if (match) {
    name = match.full_name;
  }


  return {
    player: name,
    matches: s.matches,
    tries: s.tries
  }
});

console.log(result)

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}

如果你想要它，以便在没有匹配项时不包含它，你可以将 .map 更改为 .reduce

var players = {
  "players": [{
      "id": 109191123,
      "surname": "Farah",
      "full_name": "Robbie Farah",
      "short_name": "R. Farah",
      "other_names": "Robert",
      "jumper_number": 9,
      "position_code": "CEN1",
      "position_order": 9,
      "position_description": "Hooker",
      "is_captain": false,
      "is_interchange": false
    },
    {
      "id": 109509,
      "surname": "Rapana",
      "full_name": "Jordan Rapana",
      "short_name": "J. Rapana",
      "other_names": "Jordan",
      "jumper_number": 1,
      "position_code": "FBCK",
      "position_order": 1,
      "position_description": "Full Back",
      "is_captain": false,
      "is_interchange": false
    },
    {
      "id": 111285,
      "surname": "Waqa",
      "full_name": "Sisa Waqa",
      "short_name": "S. Waqa",
      "other_names": "Sisa",
      "jumper_number": 2,
      "position_code": "WING1",
      "position_order": 2,
      "position_description": "Wing",
      "is_captain": false,
      "is_interchange": false
    },
    {
      "id": 109861,
      "surname": "Croker",
      "full_name": "Jarrod Croker",
      "short_name": "J. Croker",
      "other_names": "Jarrod",
      "jumper_number": 3,
      "position_code": "CEN1",
      "position_order": 3,
      "position_description": "Centre",
      "is_captain": true,
      "is_interchange": false
    },
    {
      "id": 112814,
      "surname": "Lee",
      "full_name": "Edrick Lee",
      "short_name": "E. Lee",
      "other_names": "Edrick",
      "jumper_number": 5,
      "position_code": "CEN2",
      "position_order": 4,
      "position_description": "Centre",
      "is_captain": false,
      "is_interchange": false
    }
  ]
}

var stats = {
  "player_stats": [{
      "id": 112814,
      "matches": "123",
      "tries": "11"
    },
    {
      "id": 111285,
      "matches": "234",
      "tries": "22"
    },
    {
      "id": 109861,
      "matches": "345",
      "tries": "33"
    },
    {
      "id": 109509,
      "matches": "456",
      "tries": "44"
    },
    {
      "id": 109510,
      "matches": "567",
      "tries": "55"
    }
  ]
}


var result = stats.player_stats.reduce((a, s) => {
  var match = players.players.find(p => p.id == s.id);

  if (match) {
    a.push({
      player: match.full_name,
      matches: s.matches,
      tries: s.tries
    })
  }

  return a;
}, []);

console.log(result)

.as-console-wrapper {
  max-height: 100% !important;
  top: 0;
}