javascript - Accessing Nested data

Question

I am currently calling two json requests into my file:

d3.json("path/to/file.json", function(error, json) {

   d3.json("path/to/file.json", function(error, json2) {

   });
});

The structure of json 2 is like this:

[ 
  { "city" : "LA",
    "locations" : [ { "country" : "USA", "x" : 0, "y" : 0 } ] 
  }, 
  { "city" : "london",
    "locations" : [ { "country" : "UK", "x" : 0, "y" : 0 } ]
  }
  ... 
]

At the moment I'm trying to access to x & y values of json2. However, the problem I am having is that I wish to use both json & json2 in my variable:

var node = svg.selectAll("a.node")
 .data(json.cars)
 .enter().append("a")
 .attr("class", "node")
 ;

Here I wish to call json2 for the x & y positions ONLY

node.attr("transform", function(d, i) {
    return "translate(" + d.x + "," + d.y + ")";
});

node.append('path') 
    .attr("d", d3.svg.symbol().type(function(d) { return shape [d.name]; }).size(120))
    .style("fill", function(d) { return colors [d.name]; } );

Is what I'm asking for possible.. I have tried the following:

node.attr("transform", function(d,i) {
    return "translate(" + json2.locations[d].x + "," + json2.locations[d].y + ")";
});

But no luck. any help would be great - Thanks.

Answer 1

You will need to select one of the objects in the array that contains the locations first. The locations is also an array of objects so you'll need an index to access that. Try this for getting the LA, USA x variable.

json2[0].locations[0].x