I am trying to load a JSON data value, which stored on the Google Sheet, into my HTML page.
By now, I am frustrated how to get the value of “12345678” which is under the “gsx$date” and “$t”.
However, I am not able to receive the specific value and only the text of "} //]]>" was received.
Could someone help me please? Thanks!
For HTML part, I typed the following code for showing the specific json data:
<table id="dataTable">
<tbody>
</tbody>
</table>
For Javascript part:
<script type="text/javascript" language="javascript>
let xhr = new XMLHttpRequest;
xhr.open('GET', 'url', true);
xhr.onload = function()
{
if (this.status === 200)
{
let data = JSON.parse(this.responseText).entry,
tbodyHtml = '';
data.map(function(d) {
tbodyHtml =+ `
<tr>
<td>${d.gsx$date.$t}</td>
</tr>
`;
});
document.querySelector('#dataTable tbody').innerHTML = tbodyHtml;
}
}
xhr.send();
</script>
This is my JSON data from a Google Sheet
{
"version":"1.0",
"encoding":"UTF-8",
"feed":{
"xmlns":"http://www.w3.org/2005/Atom",
"xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/",
"xmlns$gsx":"http://schemas.google.com/spreadsheets/2006/extended"
},
"updated":{
"$t":"2020-02-16T06:28:44.692Z"
},
"category":[
{
"scheme":"http://schemas.google.com/spreadsheets/2006",
"term":"http://schemas.google.com/spreadsheets/2006#list"
}
],
"title":{
"type":"text",
"$t":"Today"
},
"openSearch$totalResults":{
"$t":"1"
},
"openSearch$startIndex":{
"$t":"1"
},
"entry":[
{
"updated":{
"$t":"2020-02-16T06:28:44.692Z"
},
"category":[
{
"scheme":"http://schemas.google.com/spreadsheets/2006",
"term":"http://schemas.google.com/spreadsheets/2006#list"
}
],
"title":{
"type":"text",
"$t":"1"
},
"content":{
"type":"text",
"$t":"time: 2, todayhightemp: 3, todayhightemptime: 4"
},
"link":[
{
"rel":"self",
"type":"application/atom+xml",
"href":"https://spreadsheets.google.com/feeds/list/133WezZS498sLEDZ-2ZM_2lvxwcMYwXTiGZPBC0Do0p8/od6/public/full/cokwr"
}
],
"gsx$date":{
"$t":"12345678"
},
"gsx$time":{
"$t":"23456789"
},
"gsx$todayhightemp":{
"$t":"34567890"
},
"gsx$todayhightemptime":{
"$t":"45678901"
},
"gsx$todaylowtemp":{
"$t":""
},
"gsx$todaylowtemptime":{
"$t":""
},
"gsx$todayhighrh":{
"$t":""
},
"gsx$todayhighrhtime":{
"$t":""
},
"gsx$todaylowrh":{
"$t":""
},
"gsx$todaylowrhtime":{
"$t":""
},
"gsx$todayhighbar":{
"$t":""
},
"gsx$todayhighbartime":{
"$t":""
},
"gsx$todaylowbar":{
"$t":""
},
"gsx$todaylowbartime":{
"$t":""
},
"gsx$todayhighwindspeed":{
"$t":""
},
"gsx$todayhighwindspeedtime":{
"$t":""
},
"gsx$todayrainrate":{
"$t":""
},
"gsx$todayhighrainrate":{
"$t":""
},
"gsx$todayhighrainratetime":{
"$t":""
},
"gsx$todayet":{
"$t":""
},
"gsx$todayhighsolarradiation":{
"$t":""
},
"gsx$todayhighsolarradationtime":{
"$t":""
},
"gsx$todayhighuv":{
"$t":""
},
"gsx$todayhighuvtime":{
"$t":""
},
"gsx$todayhighdewpoint":{
"$t":""
},
"gsx$todayhighdewpointtime":{
"$t":""
},
"gsx$todaylowdewpoint":{
"$t":""
},
"gsx$todaylowdewpointtime":{
"$t":""
},
"gsx$todayhighheatindex":{
"$t":""
},
"gsx$todayhighheatindextime":{
"$t":""
}
}
]
}
}