通过多重循环来遍历复杂json（json里面嵌套json）

最新推荐文章于 2025-04-19 17:39:25 发布

robotfive

最新推荐文章于 2025-04-19 17:39:25 发布

阅读量1.2w

点赞数

文章标签： html 遍历 json

本文链接：https://blog.youkuaiyun.com/robotfive/article/details/70212547

版权

本文介绍如何使用JavaScript的$.each方法遍历包含嵌套JSON对象的数据，并生成HTML表格展示。示例中展示了如何遍历listDetailDataBean数组，将每个员工的信息分别插入到表格的不同单元格中，最终将生成的表格字符串插入到id为tbody的元素中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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页面代码如下：

结果如下

S1312300

员工名0

实习0

1120.00

1111

实习部

S1312301

员工名1

实习1

1120.00