从本地或从本地存储读取 json 文件创建 html 表答案

【问题标题】：Create html table from reading json file locally or from local storage从本地或从本地存储读取 json 文件创建 html 表
【发布时间】：2021-07-03 16:45:38
【问题描述】：

拥有一个从 postgres 查询并将数据写入 json 文件 queryResult.json 的 Nodejs 脚本。

在一个新的 html 文件中，当我将 json 数据硬编码到一个变量时，我能够动态地创建 html 表。但是，我不确定如何从本地存储中读取 json 文件，或者我是否需要使用外部 JS 库来提供帮助。我刚才确实尝试通过添加一个 ajax 调用来从本地存储/文件夹中获取文件，但是我收到了一个与 cors 相关的错误。我想我需要托管这个文件。还有其他方法可以在本地测试吗？也许我在想像 wamp 之类的本地网络服务器？

html代码https://pastebin.com/Wir6zfUm

<body onload="CreateTableFromJSON()">
  <p id="showData"></p>
</body>
<script src="queryResult.json" type="text/javascript"></script>
<script>
  function CreateTableFromJSON() {

    var results = [
    {
      "unique_id": "0555163995",
      "group": "Robomonkey",
      "status": "Assigned",
      "last_responder": "batman",
      "last_response_date": "2021-04-02T06:43:24.000Z"
    }
  ]

  // EXTRACT VALUE FOR HTML HEADER. 
  var col = [];
  for (var i = 0; i < results.length; i++) {
    for (var key in results[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  var table = document.createElement("table");
  // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
  var tr = table.insertRow(-1);                   // TABLE ROW.

  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th");      // TABLE HEADER.
    th.innerHTML = col[i];
    tr.appendChild(th);
  }

  // ADD JSON DATA TO THE TABLE AS ROWS.
  for (var i = 0; i < results.length; i++) {
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      tabCell.innerHTML = results[i][col[j]];
    }
  }

【问题讨论】：

标签： javascript html json ajax

【解决方案1】：

所以先说几件事..

为什么要将 JSON 响应写入文件？
当您说本地存储时，您指的是实际的 localStorage 还是仅存储在本地？（很重要的一点：D）

根据问题标题，我假设您使用的是 Node，因此没有充分的理由将 PG 的 JSON 响应写入文件，您只需在响应中返回查询响应 (除非出于某种原因您需要将其写入文件，但这并不是真正的好方法）

您想要做的是使用模板引擎（例如我正在使用 EJS）

接下来的流程将是使用 EJS 并像这样循环您的 PG 响应

   res.render('path/to/ejs/view', {
                            items: [pg response],
                            })

pg 响应将是 pg 查询返回的变量。

然后在你的 ejs 页面上你会做类似的事情

<% for ( i in pg-response){ %>
<tr><td> <%-pg-response[i].item %></td></tr>
<%}%>

现在这并不是说您必须使用 EJS 或任何模板引擎，您可以只从 API 公开 JSON 并执行 XHR 请求，但模板引擎应该可以正常工作。

另一方面，在没有网络服务器的情况下尝试在本地运行时，您总是会遇到 cors 错误。如果您使用的是 NODE，则不需要 WAMP，因为它是网络服务器，应该在 localhost:port 上运行，允许您向端点发出 XHR 请求。

【讨论】：