javascript - Getting key and value of object -
while i'm trying access key , value of object, it's giving undefined
. below code
<script type="text/javascript"> var data; var xaxisname; var yaxisname; var jso; function getx(d) { return d[xaxisname]; } function gety(d) { return d[yaxisname]; } d3.json("response.json", function (json) { console.log("hi"); console.log(json); //getting values console.log("this " +json.users); //getting values xaxisname = json.attribute1.; console.log("xaxisname=" + xaxisname); //not getting values yaxisname = json.attribute2; console.log("yaxisname=" + yaxisname); //not getting values data = json.users; alert(data); data.map(function(d) { console.log(getx(d));}); data.map(function(i) {console.log(i);}); visualize(data); //then start visualization }); function visualize (data) { var padding = 40; var margin = {top:30, right: 30, bottom: 30, left:100}; var w = 700 - margin.left - margin.right; var h = 400 - margin.top - margin.bottom; //the svg var svg = d3.select("#container") .append("svg") .attr("class", "chart") .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //the scales var xscale = d3.scale.ordinal() .domain(d3.range(data.length)) .rangeroundbands([0, w], 0.04); var yscale = d3.scale.linear() .domain([d3.max(data, gety), 0]) .range([0, h]); //the axes var xaxis = d3.svg.axis().scale(xscale).orient("bottom"); var yaxis = d3.svg.axis().scale(yscale).orient("left"); //add data , bars svg.selectall("rect") .data(data) .enter() .append("rect") .attr("x", function(d, i) { return xscale(i);}) .attr("y", function(d) { return yscale(gety(d));}) .attr("width", xscale.rangeband()) .attr("height", function(d) { return h - yscale(gety(d));}) .attr("class", "bar"); //create axes svg.append("g").attr("class", "x axis") .attr("transform", "translate(0," + h + ")").call(xaxis); svg.append("g").attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text(yaxisname); } alert("done"); </script>
it's giving undefined
xaxisname
, yaxisname
. in svg.selectall("rect")
y
, height
giving nan
.
my json
{ "users": [ { "name": "warchicken", "score": 30 }, { "name": "daydreamt", "score": 100 }, { "name": "anas2001", "score": 30 }, { "name": "ocjojo", "score": 30 }, { "name": "joklawitter", "score": 30 } ] }
it looks likes want extract property names user objects. that, can either use object.keys()
or iterate on object for...in
(related question: how enumerate properties of javascript object?).
var keys = object.keys(json.users[0]); xaxisname = keys[0]; yaxisname = keys[1];
beware though object properties not ordered. might end xaxisname
being "score"
, vice versa.
if need xaxisname
value, either have hardcode it, or add information json return server. example:
{ "axes": ["name", "score"], "users": [...] }
then with
xaxisname = json.axes[0]; // ...
side note: choosing json
variables name object not optimal because suggests variables holds string containing json, while holds object. how chartdata
instead?
Comments
Post a Comment