时间戳

首页 > 解决方案 > 如何让 JSON 数据显示在 HTML div 中？

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

问题描述

试图让这个 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_datadiv中。

标签： javascriptjqueryhtmljson

解决方案

关于纯 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>

推荐阅读