Question

有json数据在web界面如何用JS的for循环取出并生成表格

这样的json数据我要在web界面上生成一个表格如何用for循环取出并生成呢？





Answer 1

window.onload = function () {
    var datanav = [{ "name": "张三", "position": "1", "powerrate": "2", "waterrate": "3", "healthcosts": "4", "watermeter": "5", "ammeter": "6", "linkman": "7", "phone": "8", "rental": "9", "tenancy": "10", "remark": "11" }, { "name": "李四", "position": "11", "powerrate": "10", "waterrate": "9", "healthcosts": "8", "watermeter": "7", "ammeter": "6", "linkman": "5", "phone": "4", "rental": "3", "tenancy": "2", "remark": "1"}];
    var tb = document.getElementById("tb");
    for (var i = 0; i < datanav.length; i++) {
        var row = tb.insertRow(tb.rows.length);
        var c1 = row.insertCell(0);
        c1.innerHTML = datanav[i].name;
        var c2 = row.insertCell(1);
        c2.innerHTML = datanav[i].waterrate;
        var c3 = row.insertCell(2);
        c3.innerHTML = datanav[i].powerrate;
        var c4 = row.insertCell(3);
        c4.innerHTML = datanav[i].healthcosts;
        var c5 = row.insertCell(4);
        c5.innerHTML = datanav[i].watermeter;
        var c6 = row.insertCell(5);
        c6.innerHTML = datanav[i].ammeter;
        var c7 = row.insertCell(6);
        c7.innerHTML = datanav[i].linkman;
        var c8 = row.insertCell(7);
        c8.innerHTML = datanav[i].phone;
        var c9 = row.insertCell(8);
        c9.innerHTML = datanav[i].rental;
        var c10 = row.insertCell(9);
        c10.innerHTML = datanav[i].tenancy;
    }
}

<table border="1" id="tb">
<tr>
<td>租户</td>
<td>水费</td>
<td>电费</td>
<td>卫生费</td>
<td>水表位置</td>
<td>电表位置</td>
<td>联系人</td>
<td>电话</td>
<td>房费</td>
<td>租赁合同期限</td>
</tr>
</table>

Answer 2

首先要把JSON类型的字符转换成数组。这就要引用json.js 的一个包了。

我上传了附件。在你的页面引用这个。

然后转换即可，

var arry = JSON.parse(datanav);

你看一下 Json.js 里还有个方法是数组或对象转换成Json 格式的字符串

JSON.stringify(param);

追问

我主要是html里面用js调用json数据for循环并生成表格的那个代码不会写~能写个例子给我看看吗？十分感谢

Answer 3

js可以写成：

var data=[{name:"a",age:12},{name:"b",age:11},{name:"c",age:13},{name:"d",age:14}]; 
//遍历
for(var o in data){ 
    alert(o); 
    alert(data[o]); 
    alert("text:"+data[o].name+" value:"+data[o].age ); 
}

或是

function text(){ 
    var json = {"options":"[{"text":"王家湾","value":"9"},{"text":"李家湾","value":"10"},{"text":"邵家湾","value":"13"}]"} 
json = eval(json.options) 
    for(var i=0; i<json.length; i++){ 
        alert(json[i].text+" " + json[i].value) 
    } 
}