1. 程式人生 > >通過多重迴圈來遍歷複雜json(json裡面巢狀json)

通過多重迴圈來遍歷複雜json(json裡面巢狀json)

var data = {"listDetailDataBean":[{"deptCode":"1111","deptName":"實習部","empAnnualIncome":"1120.00","empJob":"實習0","empName":"員工名0","empNumber":"S1312300"},{"deptCode":"1111","deptName":"實習部","empAnnualIncome":"1120.00","empJob":"實習1","empName":"員工名1","empNumber":"S1312301"},{"deptCode":"1111","deptName":"實習部","empAnnualIncome":"1120.00","empJob":"實習2","empName":"員工名2","empNumber":"S1312302"},{"deptCode":"1111","deptName":"實習部","empAnnualIncome":"1120.00","empJob":"實習3","empName":"員工名3","empNumber":"S1312303"}]}

這樣的json我們怎麼把它遍歷輸出呢,答案就是用多重迴圈。

var trStr = '';
$.each(data,function(tmp,tb){
    $.each(tb,function(i,n){
       trStr += '<tr height="25px" class="example">';//拼接處規範的表格形式
             trStr += '<td colspan="2" width="10%" align="center">' + n.empNumber + '</td>';
             trStr += '<td colspan="3" width="15%" align="center">' + n.empName + '</td>';
             trStr += '<td colspan="3" width="15%" align="center">' + n.empJob + '</td>';
             trStr += '<td colspan="4" width="20%" align="right">' + n.empAnnualIncome + '</td>';
             trStr += '<td colspan="3" width="15%" align="center">' + n.deptCode + '</td>';
             trStr += '<td colspan="5" width="25%" align="left">' + n.deptName + '</td>';
             trStr += '</tr>';  
    });
   
});
 $("#tbody").html(trStr);

html頁面程式碼如下:

<table id="mm" border="1">
 <tbody id="tbody">  </tbody>
</table>

結果如下

S1312300 員工名0 實習0 1120.00 1111 實習部
S1312301 員工名1 實習1 1120.00 1111 實習部
S1312302 員工名2 實習2 1120.00 1111 實習部
S1312303 員工名3 實習3 1120.00 1111 實習部