将json数据导入动态创建的html表[重复]答案

【问题标题】：Importing json data into dynamically created html table [duplicate]将json数据导入动态创建的html表[重复]
【发布时间】：2020-02-14 15:28:53
【问题描述】：

由于我是 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 字段。如果玩家没有统计数据，则忽略它们并仅打印具有统计数据的那些。

每次我写一些类似的代码

$.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 匹配，那么我必须打印如下所示的统计数据。甚至无法启动。任何提示或答案都会有很大帮助。

【问题讨论】：

标签： javascript html json

【解决方案1】：

您正在尝试从 file:// 获取，根据 RFC-6454 中的 Origin 定义（Web Origin 概念）不支持该文件。

所以尝试安装本地服务器并通过localhost://访问

【讨论】：

【解决方案2】：

CORS POLICY 表示跨域资源共享。它使用额外的 HTTP 标头告诉浏览器让在一个来源运行的 Web 应用程序访问来自不同来源的选定资源。当 Web 应用程序请求的资源与其自己的来源（域、协议或端口）不同时，它会执行跨域 HTTP 请求。

你可以通过这个链接："Cross origin requests are only supported for HTTP." error when loading a local file 说你需要从这样的地方获取数据：http://localhost:8080/apiName

【讨论】：