尝试使用 HTML 中的 JS 脚本读取 JSON 文件答案

【问题标题】：Trying to read a JSON file with a JS script in HTML尝试使用 HTML 中的 JS 脚本读取 JSON 文件
【发布时间】：2022-02-03 01:26:55
【问题描述】：

我正在尝试使用我的 json 文件 busesNotArrived.json 并将其内容放在 <p> 中，但是它不起作用并且 JSON 文件中的数据未显示，这是我的代码：

<p>Buses Not Arrived:<br><br><span id="output"></p>

<script>
  const fs = require('fs')
  fs.readFile('json/busesNotArrived.json', 'utf8', (err, jsonString) => {
      if (err) {
          alert('Error reading Database:', err)
          return
      }
      try {
          const bus = JSON.parse(jsonString)
          alert("Bus address is:", bus.busNumber)
          document.getElementById('output').innerHTML = bus.BusNumber;
  } catch(err) {
          alert('Error parsing JSON string:', err)
      }
  })
</script>

在我的 JSON 文件中，存储的内容如下：

{
    "busRoute": 123123,
    "busNumber": 123123
}

【问题讨论】：

标签： javascript html node.js json

【解决方案1】：

Javascript 与 node.js 不同 require() 不是 JavaScript 标准的一部分，浏览器不支持开箱即用，它是 node.js 模块系统。

您可能需要直接包含模块；某些模块可能无法在浏览器沙箱上下文中运行。

此外，http://browserify.org/ 之类的工具也可能有用。

请把错误信息也放上来。

【讨论】：

没有错误信息，它只是正常运行，但没有 JSON 数据。
“browserify.org 之类的工具可能有用”——它们不会。浏览器不提供使 fs 可用的 API。
Console.log json 解析让我看看里面有什么
好的，这是输出：Bus address is: 123123。我使用了相同的代码，但将其放入了自己的文件中。
好的，请稍等。

【解决方案2】：

好吧，我最终想通了，就像@Ronnel 所说的那样，你不能使用require()，因为那是node.js 而不是javascript，所以你必须使用fetch() api 来获取@987654324 @文件。

对于任何想查看代码的人，这里是：

<div id="myData" class='absolute1' onclick='notArrived()'><strong><u>Not Yet Arrived</u></strong><br><br></div>

<script>
        fetch('json/busesNotArrived.json')
              .then(function (response) {
                  return response.json();
              })
              .then(function (data) {
                  appendData(data);
              })
              .catch(function (err) {
                  console.log('error: ' + err);
              });
          function appendData(data) {
              var mainContainer = document.getElementById("myData");
              for (var i = 0; i < data.length; i++) {
                  var div = document.createElement("div");
                  div.innerHTML = 'Bus Number: ' + data[i].busNumber + "<br>" + 'Bus Route:' + ' ' + data[i].busRoute + "<br><br>";
                  mainContainer.appendChild(div);
              }
          }

</script>

||对缩进感到抱歉：P ||

此外，这是 .json 文件中的内容，因此您可以处理它：

[
    {
        "id": "1",
        "busNumber": "4024",
        "busRoute": "44444"
    },
    {
        "id": "2",
        "busNumber": "4044",
        "busRoute": "4444"
    },
    {
        "id": "3",
        "busNumber": "5024",
        "busRoute": "55555"
    }
]

祝你好运！

If you wanted more explanation, here is where I got the code from:

(https://howtocreateapps.com/fetch-and-display-json-html-javascript/)

【讨论】：