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

Question

我正在尝试使用我的 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
}

Answer 1

Javascript is not the same as node.js require() is not a part of JavaScript standard and is not supported by browsers out of the box, it is the node.js module system.

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

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

并且请把错误信息也。

Answer 2

Well, I eventually figured it out, so like what @Ronnel said, you cannot use require() because that is node.js and not javascript, so you would have to use the fetch() api to get the .json file.

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

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

祝你好运！

如果您想要更多解释，这里是我获得代码的地方：

（ https://howtocreateapps.com/fetch-and-display-json-html-javascript/ ）