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
        }
    ]
}

类似地，第二个是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

，

匹配

，以及

尝试

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

每次我写这样的代码

$.getJSON( "data/players.json", function( json ) {
  console.log( "JSON Data received, Surname is " + json.surname);
});

我在chrome控制台上遇到以下错误：

jquery-1.8.min.js:2 Access to XMLHttpRequest at 'file:///C:/Users/20was/Desktop/JSProject/data/players.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

是因为我在本地做吗？关于提到的将其解析到表中的问题，我无法从这个错误继续前进。有什么帮助吗

编辑：我能够纠正错误，但与表和合并两个数据集混淆

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

id

与统计数据上的

id

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

---

您正试图从文件：//中获取，根据中的源定义（Web源概念），该文件不受支持

---

因此，请尝试安装本地服务器并通过localhost进行访问：//

CORS策略意味着跨源资源共享。它使用额外的HTTP头告诉浏览器，让一个运行在一个源上的web应用程序从另一个源访问选定的资源。web应用程序从其自身请求具有不同来源（域、协议或端口）的资源时，会执行跨来源HTTP请求

您可以通过以下链接：该链接表示您需要从以下内容获取数据：