javascript - 如何让 JSON 数据显示在 HTML div 中？

Question

尝试让此 json 数据显示在 HTML div 中

[{
  "botten": ["Krispig", "tunn"]
},
]  

HTML 文档中的 div 具有类名 box1_data。这是我的脚本:

var bottenInfo = document.getElementsByClassName("box1_data");

$.getJSON('choosepizza.json', function(choosePizzaData) {
  choosePizza(choosePizzaData);

  function choosePizza(choosePizzaData) {
    var request = new XMLHttpRequest();
    request.open('GET', 'choosepizza.json');
    request.onload = function() {
      var data = JSON.parse(request.responseText);
      renderHTML(data);
    };
    request.send();

    function renderHTML(bottenData) {
      var text = "";
      for (var i = 0; i < bottenData.length; i++) {
        text += '<p>' + bottenData[i].botten + '<p>';
      }
      bottenInfo.innerHTML = text;
    }
  });

我做错了什么？

krispig 和 tunn 应该显示在 .box1_data div 中。

Answer 1

对于普通 JS 和 jQuery 之间的区别以及 AJAX 的工作原理，您的代码似乎相当困惑。您当前使用不同的逻辑两次发出相同的请求，解析已解析的对象，未正确访问结果对象，并尝试将节点集合作为单个元素进行访问。

要解决此问题，您只需循环遍历结果，该结果将自动反序列化为对象，并生成要放置在所需元素中的 HTML:

$.getJSON('choosepizza.json', function(choosePizzaData) {
  var html = choosePizzaData[0].botten.map(function(botten) {
    return '<p>' + botten + '</p>';
  });
  $(".box1_data").html(html);
});

这是一个没有 AJAX 的工作示例，显然在 SO 上不起作用:

// the response from the request:
var choosePizzaData = [{
  "botten": ["Krispig", "tunn"]
}]

// within the AJAX callback
var html = choosePizzaData[0].botten.map(function(botten) {
  return '<p>' + botten + '</p>';
});
$(".box1_data").html(html);

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