JSON数据未在HTML中显示[重复]答案

【问题标题】：JSON data not showing in HTML [duplicate]JSON数据未在HTML中显示[重复]
【发布时间】：2017-11-30 10:27:30
【问题描述】：

我有一些 JSON 数据，我想用特定键（这些键是名称、链接 URL、图像和价格）在页面上呈现。我用 jsonData 的 id 制作了一个简单的 div，并将 JSON 数据弹出到一个变量中，但是，由于某种原因，我不断得到 p>

未捕获的类型错误：无法读取 null 的属性“innerHTML”

我猜我在某个地方有拼写错误，我也失明了？

关于如何将这些数据放入 div 有什么建议吗？

这是我的 HTML

<body>
 <div id="jsonData"></div>
</body>

这是我的 JS

    var obj = {
  'placements': [
    {
      'id': '029148',
      'name': 'Woodblock Play Suit',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/woodblock-play-suit/029148.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw0f93fcd4/images/hi-res/warehouse_02914899_2.jpg',
      'price':'46.00'
    },
    {
      'id':'0294526806',
      'name':'Smock Dress',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/smock-dress/0294526806.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dwc9d5ea05/images/hi-res/warehouse_02945268_5.jpg',
      'price':'39.00'
    },
    {
      'id':'0297180006',
      'name':'Cami',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/cami/0297180006.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4b954022/images/hi-res/warehouse_02971800_2.jpg',
      'price':'9.00'
    },
    {
      'id':'0298473606',
      'name':'Asymmetric Wrap Cami Dress',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/asymmetric-wrap-cami-dress/0298473606.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw686fea84/images/hi-res/warehouse_02984736_2.jpg',
      'price':'46.00'
    },
    {
      'id':'0297155306',
      'name':'Casual Stripe Tee',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/casual-stripe-tee/0297155306.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4609af3e/images/hi-res/warehouse_02971553_2.jpg',
      'price':'16.00'
    }
  ]
};

var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++)
for(var keys in obj.placements[i]){
  console.log(keys +obj.placements[i][keys]);
  divId.innerHTML = divId.innerHTML + '<br/>'+ keys + obj.placements[i][keys];
}

【问题讨论】：

当您的脚本运行document.getElementById('jsonData') 时，<div id="jsonData"></div> 还不存在。要么将脚本移动到 div 之后，要么将最后几行包装在一个函数中，并在文档加载后调用它。
示例代码：jsfiddle.net/khrismuc/n1oxmje5
如果以下答案之一回答了您的问题，本网站的工作方式，您将“接受”答案，更多信息请点击此处：What should I do when someone answers my question? 。但前提是你的问题真的得到了回答。如果没有，请考虑在问题中添加更多详细信息。

标签： javascript jquery html json

【解决方案1】：

确保您的脚本标记直接放在结束 </body> 标记的上方。您的脚本可能已损坏，因为在运行代码时，<div id="jsonData"></div> 尚不可用。

为了只显示图片，这里有一个例子：

var obj = {
  'placements': [
    {
      'id': '029148',
      'name': 'Woodblock Play Suit',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/woodblock-play-suit/029148.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw0f93fcd4/images/hi-res/warehouse_02914899_2.jpg',
      'price':'46.00'
    },
    {
      'id':'0294526806',
      'name':'Smock Dress',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/smock-dress/0294526806.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dwc9d5ea05/images/hi-res/warehouse_02945268_5.jpg',
      'price':'39.00'
    },
    {
      'id':'0297180006',
      'name':'Cami',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/cami/0297180006.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4b954022/images/hi-res/warehouse_02971800_2.jpg',
      'price':'9.00'
    },
    {
      'id':'0298473606',
      'name':'Asymmetric Wrap Cami Dress',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/asymmetric-wrap-cami-dress/0298473606.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw686fea84/images/hi-res/warehouse_02984736_2.jpg',
      'price':'46.00'
    },
    {
      'id':'0297155306',
      'name':'Casual Stripe Tee',
      'linkURL':'http://www.warehouse.co.uk/gb/just-arrived/all/casual-stripe-tee/0297155306.html',
      'imageURL':'http://demandware.edgesuite.net/aaxe_prd/on/demandware.static/-/Sites-WAREHOUSE/default/dw4609af3e/images/hi-res/warehouse_02971553_2.jpg',
      'price':'16.00'
    }
  ]
};

var divId = document.getElementById('jsonData');
for(var i=0;i<obj.placements.length;i++) {
  divId.innerHTML += '<img src="' + obj.placements[i]['imageURL'] + '" style="max-width: 100px; float: left; padding: 5px;" />';
}

<body>
 <div id="jsonData"></div>
</body>

【讨论】：

现在数据很好，但是我如何使用特定的键获得实际图像等？我要把整个物体都拿出来？
您到底想展示什么？只是图片网址？
我只想要名称、链接网址、图片和价格
使用我上面的例子，只包含你想要的数据。一切都在obj.placements[i] 数组中。只需访问您想要的密钥，并将它们放在您想要的位置。
你是最棒的！！！！！

【解决方案2】：

修改你的代码：

document.addEventListener('DOMContentLoaded', function(e) {
  var divId = document.getElementById('jsonData');
  for(var i=0;i<obj.placements.length;i++)
    for(var keys in obj.placements[i]){
      console.log(keys +obj.placements[i][keys]);
      divId.innerHTML = divId.innerHTML + '<br/>'+ keys + obj.placements[i][keys];
    }
});

更新：

如果您需要某些特定的键。我会这样更新你的代码：

document.addEventListener('DOMContentLoaded', function(e) {
  var result = "";
  var allowed = ['some', 'key', 'allowed'];

  // some ES5 magic
  obj.placements.forEach(el => {
    var keys = Object.keys(el).filter(key => allowed.indexOf(key) !== -1);
    result+= '<br/>'+ keys + obj.placements[i][keys];
  });

  document.getElementById('jsonData').innerHTML = result;
});

【讨论】：

非常感谢，非常棒。我如何才能获得名称、链接、价格和图片？我现在明白了吗？
@nattie87 只需根据您的需要格式化 innerHTML。
@nattie87 如果我正确理解你的问题，我已经更新了我的答案。只需修改“允许的数组”就可以了。
好的，我已经完成了。谢谢大家的帮助！！！！

【解决方案3】：

您需要添加 jquery 库。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

在每个循环之后使用

var html_data = '';
$.each(obj.placements,function(k,v){
         $.each(v,function(key,value){
             html_data += key+' : '+value+"<br/>";
         });
    });
$("#jsonData").html(html_data);

谢谢。

【讨论】：

两个循环都可以用纯 JavaScript 完成，绝对不需要 jQuery。帖子中解释的问题与循环无关，但尚未加载必须显示输出的div。
啊，旧的“使用 jQuery”答案。