Question

我有一些JSON数据我想在具有特定键的页面上呈现（这些键是名称，linkURL，图像和价格）。我创建了一个id为jsonData的简单div，并在一个变量中弹出JSON数据，但由于某种原因，我不断获取

未捕获的TypeError：无法读取属性＆lt; innerHTML＆＃39; of null＆＃39;

我猜我在某个地方也有拼写错误，我也是盲目的？

关于如何将这些数据输入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];
}

Answer 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>

Answer 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;
});

Answer 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);

感谢。

JSON数据未显示在HTML中

3 个答案: