Nested JSON array and D3JS

Question

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.

Answer 1

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