Question

我意识到这个问题已被问到很多。不幸的是，我还没有能够找到如何正确实施任何解决方案。

所以我在同一个文件夹中有3个文件。 1个python脚本，根据在线抓取的数据创建json文件。

Python脚本：

jsonFile = {"title": bookTitle, "author": author}
jsonArray.append(jsonFile)
with open(data.json, 'w) as file:
    json.dump(jsonArray, file)

JSON文件最终看起来像这样：

[{"name": "Foo", "author": "bar"},
{"name": "Bart", "author": "Simpson"},
 {"name": "Homer", "author": "Simpson"}]

现在我试图将这些数据放入我的index.html并以各种方式显示，例如表格。

的index.html：

<head>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
  <div id="table-container">
    <table id="table">
       <tr>
          <th>Name</th>
          <th>Author</th>
       </tr>
      </table>
      </div></div>
     <script>
        var data = $.getJSON(data.json);
        var table = document.getElementById("table");

        data.forEach(function(object)  {
            var tr = document.createElement("tr");
            tr.innerHTML = "<td>" + object.title + "</td>" + "<td>" + object.author + "</td>"
            table.appendChild(tr);
        });
</script></body>

我感谢有人可能给出的任何指示。附带问题：我需要使用JQuery吗？还有更好的方法吗？

Answer 1

通过https://www.iana.org/assignments/ieee-802-numbers/ieee-802-numbers.xhtml

检查您是否需要jQuery

根据他们的建议，您的JS代码将如下所示：

var request = new XMLHttpRequest();
request.open('GET', 'data.json', true);

request.onload = function () {
    if (this.status >= 200 && this.status < 400) {
        // Success!
        var data = JSON.parse(this.response); //this is your JSON that is returned from your API (python)
        var table = document.querySelector('#table');

        for (var i = 0; i < data.length; i++) {
            var tr = document.createElement('tr');

            tr.innerHTML = '<td>' + object.title + '</td>' + '<td>' + object.author + '</td>'
            table.appendChild(tr);
        }
    } else {
        // ERROR!!
    }
};

request.onerror = function () {
    // There was a connection error of some sort
};

request.send();

使用json文件在html

1 个答案: