如何使用D3从JSON数组元素呈现表 [英] How to render table from JSON array elemnts using d3
本文介绍了如何使用D3从JSON数组元素呈现表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
伙计，
我想使用D3.js为以下JSON呈现html表
I want to render a html table for the following JSON using D3.js
我为此过程使用的JSON在这里， http://jsfiddle.net/d9wgnbdd/2
The JSON I am using for this proceess is here, http://jsfiddle.net/d9wgnbdd/2
例如，办公室类型"具有更多的代码"，而该代码"具有更多的集群"，集群也具有更多的分支.
For example, 'office type' has more 'code' and that 'code' having more 'cluster' also the clusters having more branches.
我想显示如下表，在此@mccannaff中需要您的帮助.展望
I want to show the table as follows, need your help in this @mccannaff. Looking forward
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
这是我要显示表格的html
This is my html I am trying to show the 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>
有人可以帮助我解决这个问题吗?
Ca anyone help me in ow to handle this problem?
推荐答案
如果您仅对代码感兴趣，则可以执行以下操作(它假定HTML中存在带有<tbody>的表，并且JSON对象称为data):
If you are only interested in the codes, you could do something like this (it assumes a table with <tbody> exists in your HTML, and that your big JSON 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);
});
这篇关于如何使用D3从JSON数组元素呈现表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
