d3 chart + jQuery DataTables: trouble reading nested array

Question

I'm trying to adapt this jQuery DataTables example to a d3 chart that I've been developing.

Here's a link to the semi-working Plunker: http://plnkr.co/edit/kXvBjNsCbblC3ykkuPsL?p=preview

The problem is that some of the values are showing up in the table, while others are not (in particular, the values that come from an array within an array). Oddly enough, the error message I'm getting, Cannot read property '0' of undefined, refers to line 1074, on which recordCol is defined. This is strange because the values for recordCol and stateName both show up just fine in the DataTable. Also strange is that all of the column headers do appear, even for the nested array (though not their values).

Here's the problematic code:

function tables(dataset) {

    var recordCol = Object.keys(dataset[0])[0];
    var stateName = Object.keys(dataset[0])[3];
    var dateCol = Object.keys(dataset[0].values[0])[0];
    var valCol = Object.keys(dataset[0].values[0])[1];

    var monthDateFormat = d3.time.format("%B");
    var yearDateFormat = d3.time.format("%Y");
    var properDateFormat = d3.time.format("%B %Y");
  
      var tableData = dataset.map(function(d) {
        d[recordCol] = d[recordCol].toString().slice(0, 15);
        d[stateName] = d[stateName].toString().slice(0, 20);
        d[dateCol] = d[dateCol];//.toString().slice(0, 20);   
        d[valCol] = d[valCol];///.toString().slice(0, 20);        

        return d;
      })

    $(".data-table").empty();

    if (dataTable) {
    dataTable.destroy();
    }

    dataTable = $(".data-table").DataTable({
      data: tableData,
      columns: [{
        "data": recordCol
      }, {
        "data": stateName
      }, {
        "data": dateCol
      }, {            
        "data": valCol        
      }]
    });

      d3.selectAll("thead th").each(function(d, i) {
        if (i === 0) {
          this.textContent = recordCol;
        } else if (i === 1) {
          this.textContent = stateName;
        } else if (i === 2) {
          this.textContent = dateCol; 
        } else if (i === 3) {
          this.textContent = valCol;          
        }
      });      
}

As you'll see in my semi-working Plunker, I've been beating a dead horse in console.log, trying to troubleshoot the error messages I've been getting, the other of which is this.

In sum, what I'm trying to do is get all the values for x and y to appear in the DataTable alongside state and record -- as well as relabel the column headers that currently read x and y as as date and value, respectively.

In advance, thanks very much for any assistance you're able to offer.

Update:

The following changes, I've discovered, make the full subarray, containing all the x and y values, appear in every row of the DataTable:

  dataTable = $(".data-table").DataTable({
    data: tableData,
    columns: [{
      "data": recordCol
    }, {
      "data": stateName
    }, {
      "data": "values[, ].x" 
    }, {            
      "data": "values[, ].y"  
    }]
  });

Here's an updated Plunker. The search for a solution continues.

Update 2: The following changes make the x and y value appear as Sun May 01 2011 00:00:00 GMT-0400 (Eastern Daylight Time) and 2761, but the same in every row:

  var tableData = dataset.map(function(d) {
    d[recordCol] = d[recordCol].toString().slice(0, 15);
    d[stateName] = d[stateName].toString().slice(0, 20);
  for (var i = 0; i < dataset.length; i++) {  
    d[dateCol] = dataset[0].values[i].x;
    d[valCol] = dataset[0].values[i].y;       
  } 

  dataTable = $(".data-table").DataTable({
    data: tableData,
    columns: [{
      "data": recordCol
    }, {
      "data": stateName
    }, {
      "data": dateCol 
    }, {            
      "data": valCol  
    }]
  });

Another updated Plunker. Obviously, this is wrong; still searching for a solution.

Update 3:

Still searching for a solution, but in this third updated Plunker, I discovered how to take all of the values contained in the subarray of the parent array's first row, and (incorrectly) map them onto all of the rows of the parent array. Here's an illustration of what's going wrong:

Is anyone able to demonstrate a solution?

Answer 1

You need to change your table map. Try it:

var table_map = [];

  for (var i = 0; i < dataset.length; i++) {  
    for (var j = 0; j < dataset[i].values.length; j++) {  

      var table_row = {};
      table_row[recordCol] = dataset[i][recordCol];
      table_row[stateName] = dataset[i][stateName];

      table_row[dateCol] = dataset[i].values[j][dateCol];
      table_row[valCol] = dataset[i].values[j][valCol];

      table_map.push(table_row);
    }
  }