在线JSON数组转表格

作为一个全栈(搞)工程师，就是啥都不精，但是啥都要做。前端后端都要做，所以经常是自己写接口，自己对接口。在很多时候，接口中会返回大量的json数据，并且这些json数据是按照一定的格式进行返回的，比如按照几个字段进行排序。而当数据量很大的时候，很难一眼看出返回的数据是否按照我们既定的格式。要么就硬着头皮仔细对比，要么就将数据转换到前端表格展示后才能一目了然的看出来。

基于这个痛点，参考网上资料，编写了一个在线json数组转table的工具，先来看看效果。

工具地址：http://tools.zjh336.cn/json2Table.html

代码：

<html><head>
<meta charset="utf-8">
<title>在线JSON转表格</title>
</head>
<body>
	<div style="margin-bottom:10px;text-align:center">
		<input id="convertJson" type="button" value="json转表格">
		<input id="reset" type="button" value="重置">
	</div>
	<textarea style="width:100%;height:100px" id="jsonText"></textarea>
	<div id="tableDiv">
	</div>

<script>

var convertJson=document.getElementById("convertJson");
var reset=document.getElementById("reset");

convertJson.onclick = function(){
	convertTable();
}

reset.onclick = function(){
	resetTable();
}

function convertTable(){
	var jsonString = document.getElementById("jsonText").value;
	var jsonData = new Function("return "+ jsonString)();
	var i;
	var jsonLength = !jsonData?0:jsonData.length;
	var temp;
	var tbl;
	var tr;
	var td;
	var body;
	var tableDiv = document.getElementById("tableDiv");
	
	if(tableDiv.childElementCount>0){
		return;
	}

	tbl = document.createElement("table");
	tbl.border="1px";
	tbl.borderColor="red";
	for(i=0;i<jsonLength;i++){
		tr = document.createElement("tr");
		for(temp in jsonData[i]){
			td = document.createElement("td");
			td.appendChild(document.createTextNode(jsonData[i][temp]));
			tr.appendChild(td);
		}
		if(i==jsonLength-1){
			tr.margin="0 0 5 0";
		}
		tbl.appendChild(tr);
	}
	tableDiv.appendChild(tbl);
}

function resetTable(){
	var tableDiv=document.getElementById("tableDiv");
	tableDiv.innerHTML="";
}




</script>
</body></html>