I am trying to generate my column headers based on the key value of the returned json object. However it is returning as [0,1]
rather than [key[1],key[2]]
.
This is my json data and I’m trying to use D3 to get the key’s of this object (which is “Label”, “Count” for example) as my column headers rather than inserting it statically.
[ { "Label": "External-Partner-Induced", "Count": 9 }, { "Label": "Null", "Count": 1 }, { "Label": "FCTS-Induced", "Count": 66 }, { "Label": "EI-Partner-Induced", "Count": 78 } ]
Here is my d3 code:
d3.json('dataQualityIssuesCategory.json', function (error,data) { function tabulate(data, columns) { var table = d3.select('body').append('table') var thead = table.append('thead') var tbody = table.append('tbody'); // append the header row thead.append('tr') .selectAll('th') .data(columns).enter() .append('th') .text(function (column) { return column; }); // create a row for each object in the data var rows = tbody.selectAll('tr') .data(data) .enter() .append('tr'); // create a cell in each row for each column var cells = rows.selectAll('td') .data(function (row) { return columns.map(function (column) { return {column: column, value: row[column]}; }); }) .enter() .append('td') .text(function (d) { return d.value; }); return table; } // render the table tabulate(data, [d3.keys(data)[0], d3.keys(data)[1]]); // 2 column table });
The tabulate function is where I am trying to get my key fields for the column headers but the code above seems to be getting the entire object instead of the value INSIDE. Example: [0,1]
as column headers instead of [Label, Count]
:
Advertisement
Answer
Please note that data
is an array of objects and not an object. So to get the keys of an object, you should apply d3.keys
function on one of the objects in the array. Like this –
tabulate(data, d3.keys(data[0])); //data[0] is an object, applying d3.keys(data[0]) will return [Label, Count]
var data = [{ "Label": "External-Partner-Induced", "Count": 9 }, { "Label": "Null", "Count": 1 }, { "Label": "FCTS-Induced", "Count": 66 }, { "Label": "EI-Partner-Induced", "Count": 78 } ]; function tabulate(data, columns) { var table = d3.select('body').append('table') var thead = table.append('thead') var tbody = table.append('tbody'); // append the header row thead.append('tr') .selectAll('th') .data(columns).enter() .append('th') .text(function(column) { return column; }); // create a row for each object in the data var rows = tbody.selectAll('tr') .data(data) .enter() .append('tr'); // create a cell in each row for each column var cells = rows.selectAll('td') .data(function(row) { return columns.map(function(column) { return { column: column, value: row[column] }; }); }) .enter() .append('td') .text(function(d) { return d.value; }); return table; } // render the table tabulate(data, d3.keys(data[0]));
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>