json字符串转table

JSON是一种轻量级的数据交换格式，它已成为现代Web开发中的常用数据格式。当我们从服务器获取到一个JSON字符串时，我们有时需要将它转换成Table格式，以便我们更直观的展示数据。


//假设我们从服务器请求到的JSON字符串如下:
var jsonString = '[{"name":"张三","age":20,"gender":"男"},{"name":"李四","age":25,"gender":"女"},{"name":"王五","age":30,"gender":"男"}]';

var jsonArr = JSON.parse(jsonString);  //将JSON字符串转换为JavaScript对象

var table = <table>;  //创建一个table元素

//创建表头
var thead = <thead>;
var tr = <tr>;
for(var key in jsonArr[0]){
    var th = <th>;
    th.innerHTML = key;
    tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);

//创建表格内容
var tbody = <tbody>;
for(var i = 0; i < jsonArr.length; i++){
    var tr = <tr>;
    for(var key in jsonArr[i]){
        var td = <td>;
        td.innerHTML = jsonArr[i][key];
        tr.appendChild(td);
    }
    tbody.appendChild(tr);
}
table.appendChild(tbody);

document.body.appendChild(table);  //将table元素添加到页面中

json字符串转table

以上代码将从服务器获取到的JSON字符串转换成了表格格式，让数据更易于阅读和理解。当然，以上代码仅为一个简单的示例，实际开发中我们可能需要根据具体的需求进行不同的展示方式和样式设计。

json字符串转table

相关文章