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
– Marc B, Commented Mar 3, 2014 at 4:05
possible duplicate of Why does jQuery or a DOM method such as `getElementById` not find the element? — Felix Kling
– Felix Kling, Commented Mar 3, 2014 at 4:38
The answer was found in the duplicate question. You are correct as well. — FlashSolutions
– FlashSolutions, Commented Mar 3, 2014 at 13:36

gilly3 · Accepted Answer · 2014-03-03 04:08:15Z

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 3, 2014 at 4:08

gilly3

92.7k26 gold badges148 silver badges179 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FlashSolutions Over a year ago

Moving the script element after the span tag solved the problem.

SajithNair · Accepted Answer · 2014-03-03 04:05:07Z

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 3, 2014 at 4:05

SajithNair

3,8851 gold badge20 silver badges23 bronze badges

1 Comment

FlashSolutions Over a year ago

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.

user1968030 · Accepted Answer · 2014-03-03 04:06:47Z

0

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

answered Mar 3, 2014 at 4:06

user1968030

Comments

FlashSolutions · Accepted Answer · 2014-03-03 12:40:43Z

0

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.

answered Mar 3, 2014 at 12:40

FlashSolutions

851 silver badge10 bronze badges

Collectives™ on Stack Overflow

Cannot get innerHTML for JSON object

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related