CODEWITHSUNDEEP
javascriptarraysjsond3.js
ekatz
ekatz

Reputation: 1070

Nested JSON array and D3JS

I'm trying to use a nested json array to graph a multi-series chart with d3.js. I've looked a lot of places on this site and others, and while there are similar topics, I can't seem to make the syntax work with my specific problem (which is a simple one).

To make a line chart (like the one here: http://bl.ocks.org/mbostock/3883245), I can parse this JSON file:

[{"date":"1-May-12","close":58.13},{"date":"30-Apr-12","close":53.98},{"date":"27-Apr-12","close":67}]

By using this javascript syntax:

d3.json("data/data2.json", function(error, data) {              
data.forEach(function(d) {                              
    d.date = parseDate(d.date);                         
    d.close = +d.close;                                 
});

But what if the JSON is a nested array? For example:

{
"Stock01":[{"date":"1-May-12","close":58.13},{"date":"30-Apr-12","close":53.98},{"date":"27-Apr-12","close":67}]
"Stock02":[{"date":"1-May-12","close":28.13},{"date":"30-Apr-12","close":33.98},{"date":"27-Apr-12","close":47}]
}

I've tried options like the script below, but I'm not having any luck:

d3.json("data/data2.json", function(error, data) {              
data.forEach(function(d) {                              
    d.date = parseDate(d[0].date);                          
    d.close = +d[0].close;                                  
});

If anyone has advice for how to navigate a nested JSON array with the data.forEach function, I'd be grateful. Thanks in advance for any help.

Upvotes: 3

Views: 9205

Answers (1)

hughdbrown
hughdbrown

Reputation: 49003

You want to iterate over the keys in data, use the key to look up the corresponding value in data, and operate on the values.

You want something like this:

d3.json("data/data2.json", function(error, data) {
    for (k in data) {
        var k_data = data[k];
        k_data.forEach(function(d) {                              
            d.date = parseDate(d[0].date);                          
            d.close = +d[0].close;                               
        });
    }
});

Also, it looks like forEach takes a function that has two arguments, key and value:

forEach: function(f) {
  for (var key in this) {
    if (key.charCodeAt(0) === d3_map_prefixCode) {
      f.call(this, key.substring(1), this[key]);
    }
  }
}

For example:

values: function() {
  var values = [];
  this.forEach(function(key, value) {
    values.push(value);
  });
  return values;
}

Later: AmeliaBR is correct about forEach: it is not available for use on objects/dictionaries. 

var a = {"stock1": [1, 2, 3, 4], "stock2": [2, 3, 5, 7], "stock3": [1,2, 4,8]};
a.forEach(function(value, key){ console.log(value, key);});
/* TypeError: Object #<Object> has no method 'forEach' */

But this works:

a["stock1"].forEach(function(value, key){ console.log(value, key);});
1 0
2 1
3 2
4 3

Upvotes: 1

Related Questions