How to display a table from arrays of JSON elements using d3
People,
I want to display html table for the following JSON using D3.js
The JSON I am using for this procedure is here http://jsfiddle.net/d9wgnbdd/2
For example, "office type" has more "code" and "code" has more "cluster" and clusters have more branches.
I want to show the table as follows, you need your help with this @mccannaff. Looking ahead
Code Office-code Corp-Code Region-Code Cluster-Code
CO CRP CBE BN117 C1038
CO CRP CBE BN117 C1039
CO CRP CBE BN117 C1049
CO CRP CBE BN117 C1147
This is my html. I am trying to show a table,
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>D3: Subselection Example</title>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css">
body {
font: 13px sans-serif;
}
td, th {
padding: 1px 25px 0px 1px;
border: 1px black solid;
width:80px;
}
ul {
list-style: none;
font-weight: bold;
}
li {
margin: 0.2em 0.0em;
padding: 0.5em 1.0em;
font-weight: normal;
}
</style>
</head>
<body>
<script type="text/javascript">
d3.json("Udashboard.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.id; });
// create a row for each object in the data
var rows = tbody.selectAll('tr')
.data(data.objects)
.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.id, value: eval('row.'+column.key) };
});
})
.enter()
.append('td')
.text(function (d) { return d.value; });
return table;
}
var columnFields = [ { id: "ID", key: "id" },
{ id: "Code", key: "officetype[0].code" },
{ id: "C_Code", key: "officetype[0].corp[0].code" },
{ id: "Name", key: "name" } ];
console.log (data);
// render the table(s)
tabulate(data, columnFields); // 2 column table
});
</script>
</body>
</html>
Ka, who can help me deal with this problem?
0
source to share
1 answer
If you are only interested in codes, you can do something like this (assuming a table with exists in your HTML <tbody>
and that your JSON large object is called data
):
function codeOfInterest(keyString) {
return ((keyString == "officetype") || (keyString == "corp") || (keyString == "region") || (keyString == "cpuster"));
}
var fullList = [];
// Recurse into the data tree
function parse_object(obj, parent, parentLabel) {
var type = $.type(obj);
if (type == "object") {
var parentParam = parent;
// "code" is the only key we are interested in
if ("code" in obj) {
var label = (parentLabel == "" ? "code" : parentLabel + "_code");
var newParent = $.extend({},parent);
newParent[label] = obj["code"];
parentParam = newParent;
}
// We have reached a leaf node, add to the list
if ($.isEmptyObject(obj)) {
fullList.push($.extend({},parentParam));
} else {
for (var i in obj) {
if ($.type(obj[i]) == "object" || $.type(obj[i]) == "array") {
if (codeOfInterest(i)) {
parse_object(obj[i], parentParam, i);
} else {
parse_object(obj[i], parentParam, parentLabel);
}
}
}
}
} else if (type == "array") {
if ($.isEmptyObject(obj)) {
// We have reached a leaf node (empty array), add to the list
fullList.push($.extend({},parent));
} else {
for (var i in obj) {
parse_object(obj[i], parent, parentLabel);
}
}
}
}
// Add the array of objects to a HTML table
function addToTable(dataList) {
var defaultValue = "-";
$.each(dataList, function(index,element) {
// If one of the keys is undefined, replace its value with the default value
var code = element.code === undefined ? defaultValue : element.code;
var officetype_code = element.officetype_code === undefined ? defaultValue : element.officetype_code;
var corp_code = element.corp_code === undefined ? defaultValue : element.corp_code;
var region_code = element.region_code === undefined ? defaultValue : element.region_code;
var cpuster_code = element.cpuster_code === undefined ? defaultValue : element.cpuster_code;
// Add as a row to the table
$("<tr><td>"+code+"</td><td>"+officetype_code+"</td><td>"+corp_code+"</td><td>"+region_code+"</td><td>"+cpuster_code+"</td></tr>").appendTo("tbody");
});
}
$(function() {
parse_object(data.objects, {}, "");
addToTable(fullList);
});
+1
source to share