0

I want to display a JSON object on a html page. When I enter 

productArray[0][0].xyz

into the Firefox console then I get a value back.

Question: How can I display the value which is stored in this variable on a HTML page?

I have tried this (didn't work):

<div id="test">

<script>
window.onload = function()
{
    var out = productArray[0][0].xyz;
    document.getElementById("test").innerHTML = out;
}
</script>
  • Show more code so we can locate the problem. How do you enclose the div? Is the script in a separate file or as you show in your code snippet? – chrisv Apr 01 '16 at 10:28
  • Maybe you should check the type of the data you stored in the var. – John Apr 01 '16 at 10:30
  • 1
    Thre is a at the end... sorry... forgot it in my code above –  Apr 01 '16 at 10:33
  • provide you complete code so that we can give you the correct solution . – Anand Singh Apr 01 '16 at 10:50
  • Does it make a difference if I post the whole code if it works already in the console? I have added a few lines above. –  Apr 01 '16 at 11:05
  • 1
    don't know dude but if you can console the ` productArray[0][0].xyz` value you can put it in any element you want and we gave you the code. What you can do is ,Check the element if its exist or not before putting the value. – Anand Singh Apr 01 '16 at 11:29

3 Answers3

0

Since it's working in console in browser, I guess it's a timing problem. You're probably trying to use the value in the json before the json data is loaded and ready to use.

Assuming you're running an xhttp request or ajax call or something you'll have to run the code AFTER data is loaded. Which often means running it inside successmethod.

Maybe this post and answer helps you locate the problem? NB: This uses Ajax, so feel free to update your post with some more information so we can help you with your solution / technologies. Ajax success function

Community
  • 1
  • 1
chrisv
  • 724
  • 6
  • 18
  • I think you have to read my answer again. Now you specified that you need this value onload. The JSON data has almost certainly NOT loaded yet. Therefore you should move the code inside the success method of an AJAX call so that you are sure that all data is loaded before using them. That's why it's working in the browser (then all the data is loaded before you call the method in console). Consider showing us where you collect the data @campfire. – chrisv Apr 01 '16 at 11:12
-1

var out = "your value";//productArray[0][0].xyz commented to show you running code uncomment it when you use this in you code. ;
document.getElementById("test").innerHTML = out;
<div id='test'></div>

You actually forgot to close the DIV tag.

Anand Singh
  • 2,343
  • 1
  • 22
  • 34
  • How does this help? He asks how he can display the part that you've comment out in your example! – chrisv Apr 01 '16 at 10:25
  • he said that he got the value in console he just want to display in document. read before down vote. – Anand Singh Apr 01 '16 at 10:27
  • I want to see the value which is stored in product Array[0][0].xyz ... so commenting out is the wrong answer :) –  Apr 01 '16 at 10:30
  • 2
    Clearly, but @Anand Singh solution is correct still. The problem is as both anand and John located: Not closing the div. When adding answers it's always a good idea to explain why it works. I don't think "Thats it" is explaining anything! – chrisv Apr 01 '16 at 10:31
  • does also not work when closing the . Forgot to post it in the code above –  Apr 01 '16 at 10:35
  • @chrisv done ya forgot to mention thanks for your advice man. – Anand Singh Apr 01 '16 at 10:37
  • I don't understand why my answer got down vote. ? this was the first and correct answer – Anand Singh Apr 01 '16 at 10:40
  • @AnandSingh it was not the correct answer. He still has trouble as far as I know. Check comment below OP. – chrisv Apr 01 '16 at 10:43
  • @chrisv oops sorry i didn't see this.. campfire please provide your full code so that we can give you the exact solution. – Anand Singh Apr 01 '16 at 10:49
-1

Assuming that missing div close tag is a typo most probably the productArray is not populated by the time your code executes. Can you post a more detailed snippet ?

Aman Verma
  • 320
  • 1
  • 11