JavaScript — импорт данных JSON в динамически создаваемую таблицу HTML

Импорт данных 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 , short_name и 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 & TypeScript
Adblock
detector