JSON data not showing in HTML

Question

I have some JSON data i would like to render on a page with specific keys(those keys being name, linkURL, image and price). I made a simple div with an id of jsonData and popped the JSON data in a variable however, for some reason, I keep getting

Uncaught TypeError: Cannot read property 'innerHTML' of null'

I'm guessing I have a spelling mistake somewhere that I'm blind too?

Any advice on how I can get this data into the div?

Here is my HTML

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

Here is my 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];
}

When your script runs `document.getElementById('jsonData')`, `
` doesn't exist yet. Either move the script after the div, or wrap the last few lines in a function and call it after the document has loaded. — , Jun 27 '17 at 11:25
Here's example code: https://jsfiddle.net/khrismuc/n1oxmje5/ — , Jun 27 '17 at 11:39
If one of the answers below answered your question, the way this site works works, you'd "accept" the answer, more here: ***[What should I do when someone answers my question?](http://stackoverflow.com/help/someone-answers)***. But only if your question really has been answered. If not, consider adding more details to the question. — Blue, Jun 27 '17 at 11:43

Blue · Answer 1 · 2017-06-27T11:32:50.993

Make sure your script tag is placed directly above the closing </body> tag. Your script is likely broken because when the code is being run, <div id="jsonData"></div> is not yet available.

For displaying just the images, here's an example:

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>

Great the data is coming up now, but how do I get the actual image and such up with the specific keys? I'm getting the whole object come up? — nattie87, Jun 27 '17 at 11:26
Use my example above, and just include the data that you want. Everything is in the `obj.placements[i]` array. Just access the keys you want, and put them where you want. — Blue, Jun 27 '17 at 11:30
If I want a br inbetween each of the keys, I just presumed I could + but that's not working? — nattie87, Jun 27 '17 at 11:45
Make sure you understand how string concatenation works. Concat strings with 'quotes', variables without any special markers, and `+` symbols in between. — Blue, Jun 27 '17 at 11:47

Lazyexpert · Answer 2 · 2017-06-27T14:29:23.747

3

Modify your code:

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

Update:

In case you need some certain keys. I would update your code this way:

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

edited Jun 27 '17 at 14:29

answered Jun 27 '17 at 11:27

Lazyexpert

3,106
1
19
33

Great thank you, thats super. How would I just get the name, link, price and image to come up? I'm getting it all right now? – nattie87 Jun 27 '17 at 11:28
1

@nattie87 just format innerHTML according to your needs. – Lazyexpert Jun 27 '17 at 14:17
@nattie87 I've updated my answer, if I correctly understand you question. Just modify the 'allowed array' and this should do the job. – Lazyexpert Jun 27 '17 at 14:30
Ok I've done it. Thank you for all your help!!!! – nattie87 Jun 27 '17 at 15:45

score -2 · Answer 3 · answered Jun 27 '17 at 11:34

-2

fist of all you need to add jquery library.

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

use following each loop

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

Thanks.

answered Jun 27 '17 at 11:34

dhingani yatin

9
5

Both loops can be done with plain JavaScript, jQuery is definitely not needed. The problem that is explained in the post has nothing to do with the loops, but with the `div` where the output has to be shown is not loaded yet. – Douwe de Haan Jun 27 '17 at 11:39
2

Ah, the old "Use jQuery" answer. – Blue Jun 27 '17 at 11:42

JSON data not showing in HTML

3 Answers3