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

Popular posts from this blog

java - activate/deactivate sonar maven plugin by profile? -

python - TypeError: can only concatenate tuple (not "float") to tuple -

java - What is the difference between String. and String.this. ? -