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

由于我不熟悉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
        }
    ]
}

类似地，第二个是具有以下json代码的

stats.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

，

匹配

，以及

尝试

字段。如果一个玩家没有统计数据，那么就忽略它们，只打印那些有统计数据的

如何打印如下内容：如果玩家上的

id

与统计数据上的

id

匹配，那么我必须打印如下统计数据。甚至不能启动。任何提示或回答都会大有帮助

---

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

你能做一个嵌套循环吗？（使用reduce可能是一种更为奇特的方式，但这似乎有效）

循环浏览玩家并使用过滤功能添加他们的统计数据

然后用过滤功能再次过滤掉没有统计数据的玩家

然后执行嵌套循环以创建表

运行下面的代码段

const players={players:[{
“id”：109191123，
“姓氏”：“法拉”，
“全名”：“Robbie Farah”，
“简称”：“R.法拉”，
“其他姓名”：“罗伯特”，
“跳线号”：9，
“位置代码”：“WING1”，
“位置顺序”：2，
“位置描述”：“机翼”，
“是船长”：错，
“is_交换”：false
},
{
“id”：109861，
“姓”：“克罗克”，
“全名”：“贾罗德·克罗克”，
“简称”：“J.克罗克”，
“其他名称”：“Jarrod”，
“跳线号”：3，
“位置代码”：“CEN1”，
“位置顺序”：3，
“位置描述”：“中心”，
“船长”是真的，
“is_交换”：false
},
{
“id”：112814，
“姓”：“李”，
“全名”：“Edrick Lee”，
“短名”：“E.Lee”，
“其他名称”：“艾德里克”，
“跳线号”：5，
“位置代码”：“CEN2”，
“位置顺序”：4，
“位置描述”：“中心”，
“是船长”：错，
“is_交换”：false
}
]}
const stats={player_stats:[{
“id”：112814，
“匹配项”：“123”，
“尝试”：“11”
},
{
“id”：111285，
“匹配项”：“234”，
“尝试”：“22”
},
{
“id”：109861，
“匹配项”：“345”，
“尝试”：“33”
},
{
“id”：109509，
“匹配项”：“456”，
“尝试”：“44”
},
{
“id”：109510，
“匹配项”：“567”，
“尝试”：“55”
}
]}
$（文档）.ready（函数（）{
$（'.apple'）。追加（`
简称
比赛
尝试
`);
让myhtml=''；
players.players.forEach（函数（元素）{
element.player_stats=stats.player_stats.filter（x=>x.id==element.id）；
});
players.players.filter（x=>x.player\u stats.length）.forEach（函数（元素）{
element.player\u stats.forEach（函数（stat）{
myhtml+=`
${element.short_name}
${stat.matches}
${stat.tries}
`
});
});
$（'#mybody'）.append（myhtml）；
});

它可以工作，但不改变json文件和html是否可以完成？我的意思是，我不想改变json和html，但只想使用js或jquery动态创建表。我在.html文件中有一个类名为TableSpace的div，我将在其中打印表。我认为您不需要修改任何内容，只需使用数据的名称即可。比如，你的可能是players.players而不是players，你的第二个可能是stats.player\u stats。因此，无论您的数据名是什么，我都找不到更新的数据名。我想我的问题不清楚。我有2个.json文件，1个.html文件和一个.js文件。我要做的就是只编辑.js文件。所以，我在.html文件中有一个类名为apple的空div，我必须在该div中输出表，而不必像在答案中那样为表列添加任何额外的html。好的，我再次编辑了答案。请先将表格html附加到您的apple div中。很抱歉再次打断您。在玩家的5个id中：112814109861、111285、109509和109191123。id与112814111285109861109509匹配。但根据您提供的代码，只打印id为109861和112814的两个值。我找不到哪里有错误。