CODEWITHSUNDEEP
javascriptd3.js
scagnetti
scagnetti

Reputation: 1507

Uncaught TypeError: Cannot read property 'length' of undefined in example d3 code

I am new to d3.js and am trying to work through a seemingly simple example. The HTML in this example seems to be lacking a messages tag (?), but i am unable to correct this by inserting the tag. in any event, the error "Uncaught TypeError: Cannot read property 'length' of undefined" is associated with the D3 line that is expecting a missing 'messages' element.

demo_data.json:

{'title': 'Hello World!', 'body': 'Your big, blue, roundness impresses us all.'}

index.html:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    h1 {color:red}
</style>
<div id="demo">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"     charset="utf-8"></script>
<script>
    d3.json('demo_data.json', function(error, data){
        var demo = d3.select('#demo'),
        messages = demo.selectAll('messages').data(data).enter();
        messages.append('h1').html(function(d){ return d.title;});
        messages.append('p').html(function(d){return d.body;});
    });
</script>

Upvotes: 0

Views: 162

Answers (1)

Paweł Lula
Paweł Lula

Reputation: 310

Your data in demo_data.json must be look like this

[{'title':'Hello World!', 'body':"Your big, blue, roundness impresses us all."}]

You forgot "[" and "]"

If this does not help, let me know

Upvotes: 1

Related Questions