使用javascript将json数据以table的形式显示在页面上
简介
经常会遇到在页面上接收json数据,并以表格的形式显示在页面上,如果不引入jquery库,很多人的做法是采用
eval('('+json+')')
的方法来做将json字符串转化为object的。
但是eval是魔鬼,并不建议使用eval方法,而是采用立即执行函数的方法。
var string = '[{name:"xyy",sex:"girl"},{name:"lz",sex:"boy"}]',
jsonData = new Function("return "+ string)(),
//使用new Function()的方式新建一个function,
//同时后面加上括号立即执行该function,得到json对象组
i,
jsonLength = jsonData.length,
temp,
tbl,
tr,
td,
body;
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);
}
tbl.appendChild(tr);
}
body = document.getElementsByTagName("body");
body[0].appendChild(tbl);
以上方法使用了单var模式