I am trying to adapt this jQuery DataTables example to the d3 diagram I was developing.
Here is a link to the semi-working Plunker: http://plnkr.co/edit/kXvBjNsCbblC3ykkuPsL?p=preview
The problem is that some of the values are displayed in the table, while others are not (in particular, the values that come from the array in the array). Oddly enough, the error message I get, Cannot read property '0' of undefined , refers to line 1074, on which recordCol is recordCol . This is strange because the values for recordCol and stateName displayed in the DataTable as accurately as possible. It is also strange that all column headers really appear even for a nested array (although not for their values).
Here is the problem 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 will see in my half-working Plunker , I was beating a dead horse in console.log, trying to fix the error messages I get, the other of which is this .
In general, what I'm trying to do is get all the values for x and y to display in the DataTable along with state and record - and also move the column headers that currently read x and y as date and value respectively.
Thanks in advance for any help you can offer.
Update:
The following changes I discovered make a full subarea containing all x and y values displayed on each row of the DataTable:
dataTable = $(".data-table").DataTable({ data: tableData, columns: [{ "data": recordCol }, { "data": stateName }, { "data": "values[, ].x" }, { "data": "values[, ].y" }] });
Here's the updated Plunker . The search for a solution continues.
Update 2: The following changes make the x and y values displayed as Sun May 01 2011 00:00:00 GMT-0400 (Eastern Daylight Time) and 2761 , but the same on each line :
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 . This is obviously wrong; still looking for a solution.
Update 3:
Continuing the search for a solution, but in this third updated Plunker , I discovered how to take all the values contained in a subarray of the parent array of the first row and (incorrectly) match them with all the rows of the parent array. Here is an illustration of what goes wrong: 
Can anyone demonstrate a solution?