javascript - 无法通过 Javascript 从 JSON 中获取值

Question

我正在尝试将存储在 Google 表格中的 JSON 数据值加载到我的 HTML 页面中。

到目前为止，我很沮丧如何获得“gsx$date”和“$t”下的“12345678”的值。

但是，我无法收到具体的值，只"} //]]>"收到了文本。

有人可以帮我吗？谢谢！

对于 HTML 部分，我输入了以下代码来显示特定的 json 数据：

<table id="dataTable">
  <tbody>

  </tbody>
</table>

对于 Javascript 部分：

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

这是我来自 Google 表格的 JSON 数据

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

标签： javascripthtmljsonload

Answer 1

1) 将所有内容加载为 JSON。因此，要实现它，请按照本教程将所有工作表检索为 JSON。当我学习教程时，我的GOOGLESHEETCODE是代码，由右上角的共享按钮生成。

2) 使用 fetch 或 axios 发出请求。

这是一个例子fetch：

const url = 'YOUJSONENDPOINTURL';


fetch(url)
    .then(data=> data.json())
    .then(result => {
        let firstCell = result['feed']['entry'][0]['gsx$date']['$t'];

        result['feed']['entry'].forEach((b) => { // loop through all cells
           console.log(b.gsx$date.$t);
        })
    })

您可以XMLHttpRequest按您的要求使用。您的示例中的问题是您附加的 JSON 无效，这与我们从工作表中检索的 JSON 结构不同。