Getting key and value of object

Question

While I'm trying to access the key and value of an object, it's giving undefined. Below is my 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 the values
console.log("this " +json.users); //getting the values
xAxisName = json.attribute1.;
console.log("xAxisName=" + xAxisName);   //Not getting the values
yAxisName = json.attribute2;
console.log("yAxisName=" + yAxisName);   //Not getting the 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 the 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 the data and 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 for the xAxisName and yAxisName. In svg.selectAll("rect") y and height giving NaN.

My JSON is

{

"users": [
    {
        "name": "warchicken",
        "score": 30
    },
    {
        "name": "daydreamt",
        "score": 100
    },
    {
        "name": "Anas2001",
        "score": 30
    },
    {
        "name": "ocjojo",
        "score": 30
    },
    {
        "name": "joklawitter",
        "score": 30
    }
]
}

xAxisName = json.attribute1.; you have an extra dot at the end of this line... not sure if it's the problem... — kangoroo, Aug 26 '13 at 09:55
in your Json object there is nothing like attribute1 and attribute2 what values you want moreover json.attribute1. is not a valid operation — Vinod Louis, Aug 26 '13 at 09:57
that's true as well, maybe do like json.users.name, json.users.score though never used json really this way — kangoroo, Aug 26 '13 at 10:04
The problem has nothing to do with JSON, only with how to access the resulting JS object properly. *How* the object was created (through JSON in this case) is irrelevant to the problem. That's why I edited your question. — Felix Kling, Aug 26 '13 at 10:07

score 0 · Accepted Answer · edited May 23 '17 at 10:25

It looks likes you want to extract property names from the user objects. To do that, you can either use Object.keys() or iterate over the object with for...in (related question: How do I enumerate the properties of a JavaScript object?).

var keys = Object.keys(json.users[0]);
xAxisName = keys[0];
yAxisName = keys[1];

Beware though that object properties are not ordered. You might end up with xAxisName being "score" and vice versa.

If you need xAxisName to be a certain value, you either have to hardcode it, or add the information to the JSON you return from the server. For example:

{
    "axes": ["name", "score"],
    "users": [...]
}

Then you get it with

xAxisName = json.axes[0];
// ...

Side note: Choosing json as variables name for an object is not optimal because it suggests that the variables holds a string containing JSON, while it actually holds an object. How about chartData instead?

now i got another problem. My is graph starting around 100px below the x axis. How to set the graph to start from x-axis line. — Sathesh S, Aug 27 '13 at 09:17
If you have a new problem that you cannot solve yourself, you should ask a new question. — Felix Kling, Aug 27 '13 at 10:18

Getting key and value of object

1 Answers1