Cannot get innerHTML for JSON object

Question

The following script returns an error "cannot read property '1' of undefined", yet I can read the object in the Chrome console just fine. I have also tried obj[0].NodeName[1] which displays the value in the Chrome console but then the error says it cannot set property innerHTML of null".

What is the correct syntax to read the JSON elements into my HTML?

<script>
var nodeList='[{"NodeName":["Node1","Node2","Node3","Node4","Node5","Node6" ]}]';
obj = JSON.parse(nodeList);
document.getElementById("NodeName").innerHTML=obj.NodeName[1];
</script>   
NODE Name: <span id="NodeName"></span><br>

console.log(obj) will show you what the structure really is. You probably want `obj[0]['NodeName'][1]` — Marc B, Mar 03 '14 at 04:05
possible duplicate of [Why does jQuery or a DOM method such as \`getElementById\` not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Felix Kling, Mar 03 '14 at 04:38
The answer was found in the duplicate question. You are correct as well. — FlashSolutions, Mar 03 '14 at 13:36

score 4 · Accepted Answer · answered Mar 03 '14 at 04:08

4

The script runs before the document has finished loading and the NodeName element doesn't exist in the document yet. Run your script in an onload event handler or move your script element after the span.

answered Mar 03 '14 at 04:08

gilly3

78,870
23
132
169

Moving the script element after the span tag solved the problem. – FlashSolutions Mar 03 '14 at 13:33

score 0 · Answer 2 · answered Mar 03 '14 at 04:05

0

<script>
var nodeList='[{"NodeName":["Node1","Node2","Node3","Node4","Node5","Node6" ]}]';
obj = JSON.parse(nodeList);
document.getElementById("NodeName").innerHTML=obj[0].NodeName[1];
</script>

See this jsfiddle http://jsfiddle.net/sajith/n2xE9/

answered Mar 03 '14 at 04:05

SajithNair

3,821
1
15
23

While not voted down, your answer did not solve my problem. It works fine in jsfiddle, but not on my webpage. I had already tried the exact same script as noted in the question. The problem was really due to the position of the span tag in reference to the script. – FlashSolutions Mar 03 '14 at 13:31

score 0 · Answer 3 · answered Mar 03 '14 at 04:06

You add variable nodeList

var nodeList='[{"NodeName":["Node1","Node2","Node3","Node4","Node5","Node6" ]}]';

and then pars it to object.

obj = JSON.parse(nodeList);

So you should use:

document.getElementById("NodeName").innerHTML=obj[0].NodeName[1];

score 0 · Answer 4 · answered Mar 03 '14 at 12:40

The solution was to place the span tag above the script like so...

NODE Name: <span id="NodeName"></span><br> 

<script>
var nodeList='[{"NodeName":["Node1","Node2","Node3","Node4","Node5","Node6" ]}]';
obj = JSON.parse(nodeList);
document.getElementById("NodeName").innerHTML=obj[0].NodeName[1];
</script>

I had already tried using the above script syntax but moving the span tag before the script was what fixed the issue for me. Apparently this had already been answered in a previous post but I was unable to find it.

Thank you all for your help.

Cannot get innerHTML for JSON object

4 Answers4