D3.js array of objects not creating elements

Question

I have an array of objects like so:

var dataObj = [{stuff:"thing"}, {other:"something"}, {you:"get"}, {the:"idea"}];

And I'm attempting to append one div with the key in it as text per object:

myElement
 .selectAll("div.myClass")
 .data([dataObj])
 .enter()
 .append("div")
 .attr('class', 'myClass')
 .text(function(d, i) { 
    return Object.keys(d)[i];
});

But this creates only one div element inside myElement like so:

<div id='myElement'><div class='myClass'>stuff</div></div>

What am I missing?

I also tried

myElement
 .selectAll("div.myClass")
 .data(dataObj)
 .enter()
 .append("div")
 .attr('class', 'myClass')
 .text(function(d, i) {
    console.log("This never shows"); 
    return Object.keys(d)[0];
});

to no avail.

omer727 · Accepted Answer · 2015-11-19 21:44:11Z

1

dataObj is already an array. So it looks like you don't need to put in array

myElement
.selectAll("div.myClass")
.data(dataObj)
.enter()
.append("div")
.attr('class', 'myClass')
.text(function(d, i) { 
 return Object.keys(d)[i];
});

answered Nov 19, 2015 at 21:44

omer727

7,8178 gold badges29 silver badges41 bronze badges

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

3 Comments

Randy Hall Over a year ago

I had tried that originally, text callback never even gets called. See updated OP.

Randy Hall Over a year ago

jsfiddle.net/freer4/3wqey0kg Yeah made my own lol it does work. But not working in my live code... maybe I missed something.

Randy Hall Over a year ago

Oh in my live code the values aren't an array of objects, just one big object of key-value pairs.

Collectives™ on Stack Overflow

D3.js array of objects not creating elements

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related