Importing json data into dynamically created html table

Question

As I am new to JS and JSON, I am having tough time to find a proper solution that works for me. I have two different json files. First one : players.json with following data:

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

and similarly, second one is stats.json having following json code

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

What I am trying to do is parse the JSON files and display their data using a table, using the short_name, matches, and tries fields. If a player does not have stats then just ignore them and print only those with stats.

Ever time I write some code like

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

I get following error on chrome console:

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.

Is it because I am doing it locally ? AND about question mentioned about parsing it into table, I couldn't move forward from this error. Any help regarding this ?

Edit: I'm able to correct the error but confused with the tables and merging two datasets.

How can I print something like below: If id on players matches with id on stats, then I have to print stats like below. Couldn't even start. Any hint or answer would be great help.

score 0 · Answer 1 · edited Oct 07 '21 at 13:39

0

You are trying to fetch from file:// which is not supported as per the definition of Origin in RFC-6454 (The Web Origin Concept).

So try installing a local server and access through localhost://

edited Oct 07 '21 at 13:39

Community

1
1

answered Oct 17 '19 at 16:48

Raj Datta Manohar

157
7

score 0 · Answer 2 · answered Oct 17 '19 at 16:51

CORS POLICY meanscross origin resource sharing. that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

you can go through this link :"Cross origin requests are only supported for HTTP." error when loading a local file which say you need to fetch data from something like this: http://localhost:8080/apiName

Importing json data into dynamically created html table

2 Answers2