通过验证条件将多个 json 文件中的数据打印到单个 html 表中

Question

由于我是 JS 和 JSON 的新手，我很难找到适合我的解决方案。 我有两个不同的 json 文件。 第一个： players.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
        }
    ]
}

同样，第二个是stats.json具有以下 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"
        }
    ]
}

我想要做的是解析 JSON 文件并使用表格显示它们的数据，使用short_name 、 matches和tries字段。 如果玩家没有统计数据，则忽略它们并仅打印具有统计数据的那些。

我如何打印如下内容：如果玩家的id与统计数据的id匹配，那么我必须打印如下的统计数据。 甚至无法启动。 任何提示或答案都会有很大帮助。

Answer 1

抱歉无法看到您的图像，因为它被阻止了，但是。

你能做一个嵌套循环吗？ （可能是一种更好的方式减少，但这似乎有效）

循环播放玩家并使用过滤器 function 添加他们的统计数据。

然后使用过滤器 function 再次过滤掉没有统计数据的玩家。

然后做一个嵌套循环来创建表。

运行下面的代码片段

 const players = {players: [{ "id": 109191123, "surname": "Farah", "full_name": "Robbie Farah", "short_name": "R. Farah", "other_names": "Robert", "jumper_number": 9, "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 } ]} const 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" } ]} $(document).ready(function() { $('.apple').append(` <table class="table"> <thead> <tr> <th scope="col">Short Name</th> <th scope="col">Matches</th> <th scope="col">Tries</th> </tr> </thead> <tbody id="mybody"> </tbody> </table>`); let myhtml = ''; players.players.forEach(function(element) { element.player_stats = stats.player_stats.filter(x => x.id === element.id); }); players.players.filter(x => x.player_stats.length).forEach(function(element) { element.player_stats.forEach(function(stat) { myhtml += `<tr> <td>${element.short_name}</td> <td>${stat.matches}</td> <td>${stat.tries}</td> </tr>` }); }); $('#mybody').append(myhtml); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <div class="apple"></div>