来自 JSON 文件的 innerHTML

Question

我刚刚创建了一个 Google 表格文档并将其转换为 JSON 文件。

表格：https://docs.google.com/spreadsheets/d/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/edit#gid=0

JSON：https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic?alt=json

现在，在工作表上，我在单元格 A1 和 A2 上有文本。

我想在 HTML 文档中显示这些行。

有人知道我该怎么做吗？

Answer 1

我认为您的 JSON 文件有问题，因为缺少第 1 行，但根据您的 json，您可以通过以下方式访问文本：

const jsonResult = {"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","id":{"$t":"https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic"},"updated":{"$t":"2020-01-09T13:49:33.116Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#list"}],"title":{"type":"text","$t":"Taulukko1"},"link":[{"rel":"alternate","type":"application/atom+xml","href":"https://docs.google.com/spreadsheets/d/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/pubhtml"},{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic"},{"rel":"http://schemas.google.com/g/2005#post","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic"},{"rel":"self","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic?alt\u003djson"}],"author":[{"name":{"$t":"contact.tjolanki"},"email":{"$t":"contact.tjolanki@gmail.com"}}],"openSearch$totalResults":{"$t":"1"},"openSearch$startIndex":{"$t":"1"},"entry":[{"id":{"$t":"https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic/cokwr"},"updated":{"$t":"2020-01-09T13:49:33.116Z"},"category":[{"scheme":"http://schemas.google.com/spreadsheets/2006","term":"http://schemas.google.com/spreadsheets/2006#list"}],"title":{"type":"text","$t":"Line2"},"content":{"type":"text","$t":""},"link":[{"rel":"self","type":"application/atom+xml","href":"https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic/cokwr"}]}]}}

const entries = jsonResult.feed.entry;

entries.forEach(function (arrayItem) {
  const titleObj = arrayItem.title
  const text = titleObj['$t'];
  console.log("title object: " + JSON.stringify(titleObj, null, 2))
  console.log("Text: " + text)
  
  document.getElementById("result").innerHTML += text;
    
});

<div id="result"> Text: </div>

您可以使用json-pretty-print 更清楚地查看json。

编辑

我不知道你修改工作表时json链接是否实时更新，但你可以这样做：

1. 使用$.ajax({ type: "GET".. }) 调用您的json 链接，以检索我在预览sn-p 中粘贴的整个对象（阅读更多关于来自此处jquery.get 的请求）
2. 创建一个回调函数，以便在请求完成后获取内容（阅读更多关于来自Callback_function的回调）
3. 应用打印文本的功能

const jsonURL = "https://spreadsheets.google.com/feeds/list/18A7tTdRRIRe4rQedoee5PXj0iQdbVFCa2GVQx6p9ep8/od6/public/basic?alt=json"

function printTextFromJson(json) {
  const entries = json.feed.entry;

  entries.forEach(function(arrayItem) {
    const titleObj = arrayItem.title
    const text = titleObj['$t'];
    console.log("title object: " + JSON.stringify(titleObj, null, 2))
    console.log("Text: " + text)

    document.getElementById("result").innerHTML += text;
  });
}

function getJsonContent(callbackFunction) {
  $.ajax({
    type: "GET",
    url: jsonURL,
    success: function(returnValue) {
      console.log(returnValue);
      callbackFunction(returnValue); // callbackFunction is called when returnValue is ready.
    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert(jqXHR.status);
    },
    dataType: "json"
  });
}

getJsonContent(function(returnValue) {
  printTextFromJson(returnValue)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="result"> Text: </div>

对不起，如果答案有点太复杂，但一切都有一个开始。如果您有任何问题，请随时提问！ xD

PS：尝试换个sheet再运行这个sn-p，如果没有更新，说明两个文件不同步。

Answer 2

您必须将 js 代码中的 .json 文件作为对象导入。然后，您可以像使用“普通”对象一样访问每个值。 object.parameter