Данные JSON из Url, отображающие [Объект объекта] на веб-странице Html

#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)