#javascript #html #json
#язык JavaScript #HTML #json
Вопрос:
У меня есть Url-адрес Json , который состоит из данных, и в этих данных я хочу напечатать «название, дату и примечания» отдельно, но он показывает только [объект объекта]…
Я хочу напечатать данные, которые присутствуют в списке «события», в котором есть «название», «дата» и «примечания».
Ссылка на файл Json :- https://www.gov.uk/bank-holidays.json
Я попытался использовать события/заголовок , но это также не работает, я новичок в javascript и думаю, что совершаю основную ошибку 🙁
Заранее спасибо
lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;GFG User Detailslt;/titlegt; lt;!-- INCLUDING JQUERY--gt; lt;script src= "https://code.jquery.com/jquery-3.5.1.js"gt; lt;/scriptgt; lt;!-- CSS FOR STYLING THE PAGE --gt; lt;stylegt; table { margin: 0 auto; font-size: large; border: 1px solid black; } h1 { text-align: center; color: #006600; font-size: xx-large; font-family: 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif'; } td { background-color: #E4F5D4; border: 1px solid black; } th, td { font-weight: bold; border: 1px solid black; padding: 10px; text-align: center; } td { font-weight: lighter; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;sectiongt; lt;h1gt;Display Tablelt;/h1gt; lt;!-- TABLE CONSTRUCTION--gt; lt;table id='table'gt; lt;!-- HEADING FORMATION --gt; lt;trgt; lt;thgt;noteslt;/thgt; lt;thgt;titlelt;/thgt; lt;thgt;datelt;/thgt; lt;thgt;Divisionlt;/thgt; lt;/trgt; lt;scriptgt; $(document).ready(function () { // FETCHING DATA FROM JSON FILE $.getJSON("https://www.gov.uk/bank-holidays.json", function (data) { var student = ''; // ITERATING THROUGH OBJECTS $.each(data, function (key, value) { //CONSTRUCTION OF ROWS HAVING // DATA FROM JSON OBJECT student = 'lt;trgt;'; student = 'lt;tdgt;' value.events 'lt;/tdgt;'; student = 'lt;tdgt;' value.date 'lt;/tdgt;'; student = 'lt;tdgt;' value.notes 'lt;/tdgt;'; student = 'lt;tdgt;' value.division 'lt;/tdgt;' student = 'lt;/trgt;'; }); //INSERTING ROWS INTO TABLE $('#table').append(student); }); }); lt;/scriptgt; lt;/sectiongt; lt;/bodygt; lt;/htmlgt;
Ответ №1:
Так что это решает вашу проблему @maddy. проблема заключалась в том, к чему вы обращались. вам нужно было получить доступ к массиву событий внутри объекта. итак, вот пример
lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;titlegt;GFG User Detailslt;/titlegt; lt;!-- INCLUDING JQUERY--gt; lt;script src= "https://code.jquery.com/jquery-3.5.1.js"gt; lt;/scriptgt; lt;!-- CSS FOR STYLING THE PAGE --gt; lt;stylegt; table { margin: 0 auto; font-size: large; border: 1px solid black; } h1 { text-align: center; color: #006600; font-size: xx-large; font-family: 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif'; } td { background-color: #E4F5D4; border: 1px solid black; } th, td { font-weight: bold; border: 1px solid black; padding: 10px; text-align: center; } td { font-weight: lighter; } lt;/stylegt; lt;/headgt; lt;bodygt; lt;sectiongt; lt;h1gt;Display Tablelt;/h1gt; lt;!-- TABLE CONSTRUCTION--gt; lt;table id='table'gt; lt;!-- HEADING FORMATION --gt; lt;trgt; lt;thgt;noteslt;/thgt; lt;thgt;titlelt;/thgt; lt;thgt;datelt;/thgt; lt;thgt;Divisionlt;/thgt; lt;/trgt; lt;scriptgt; $(document).ready(function () { // FETCHING DATA FROM JSON FILE $.getJSON("https://www.gov.uk/bank-holidays.json", function (data) { var student = ''; // ITERATING THROUGH OBJECTS $.each(data, function (key, value) { //CONSTRUCTION OF ROWS HAVING // DATA FROM JSON OBJECT // map the events array in value to have access to the required object $.each(value.events, function(key1, val) { student = 'lt;trgt;'; student = 'lt;tdgt;' val.notes 'lt;/tdgt;'; student = 'lt;tdgt;' val.title 'lt;/tdgt;'; student = 'lt;tdgt;' val.date 'lt;/tdgt;'; student = 'lt;tdgt;' value.division 'lt;/tdgt;' student = 'lt;/trgt;'; }); }); //INSERTING ROWS INTO TABLE $('#table').append(student); }); }); lt;/scriptgt; lt;/sectiongt; lt;/bodygt; lt;/htmlgt;
Комментарии:
1. Да , это сработало для меня! Спасибо за спасение джоджитуна! 🙂
Ответ №2:
[объект объект]-это тип данных, которые вы извлекаете. Чтобы получить фактические данные, вам нужно будет проанализировать данные json. (разбор: распакуйте его)
Когда вы получаете что-то через Интернет (по крайней мере, с помощью http-api), вы получаете ответ, но этот ответ не может отправлять объекты javascript, поэтому вы бы использовали функцию для его строковой обработки (пример: JSON.stringify(data)
).
Встроенный JSON-объект Javascript содержит методы, необходимые для этого.
Чтобы получить доступ к этим данным при их извлечении, используйте JSON.parse(data)