从后台得json数据用js嵌套循环

最新推荐文章于 2023-07-09 16:46:23 发布

原创最新推荐文章于 2023-07-09 16:46:23 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

Java编程专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何利用Ajax从服务器获取JSON数据，并通过jQuery将其动态填充到HTML表格中。重点展示了一种确保多层级数据对齐显示的技术方案。

使用ajax传递数据，返回json对象

var url = "${ctx}/meeting/meetingreceice/?meetingId=${meeting.id}";
$.getJSON(url, function (result) {
    var html = "";
    $.each(result.data, function () {
        html += "<tr>" +
                "<td rowspan=" + this.meetingParticipantsCount + ">" + this.user.name + "</td>" +
                "<td rowspan=" + this.meetingParticipantsCount + ">" + this.user.officePhone + "</td>" +
                "<td rowspan=" + this.meetingParticipantsCount + ">" + date(this.whetherCheckDate) + "</td>" +
                "<td rowspan=" + this.meetingParticipantsCount + ">" + whetherCheck(this.whetherCheck) + "</td>" +
                "<td rowspan=" + this.meetingParticipantsCount + ">" + this.meetingParticipantsCheckIn + '/' + this.meetingParticipantsCount + "</td>" +
                "<td>" + this.meetingParticipantsList[0].name + "</td>" +
                "<td>" + this.meetingParticipantsList[0].duties + "</td>" +
                " <td class='text-navy'>" + phoneChange(this.meetingParticipantsList[0].phone) + "</td> " +
                "<td>" + change(this.meetingParticipantsList[0].type) + "</td>" +
                "</tr>";
        var i = 0;
        $.each(this.meetingParticipantsList, function () {
            if (i > 0) {
                html += "<tr>" +
                        "<td>" + this.name + "</td>" +
                        "<td>" + this.duties + "</td>" +
                        " <td class='text-navy'>" + phoneChange(this.phone) + "</td> " +
                        "<td>" + change(this.type) + "</td>" +
                        "</tr>";
            }
            i++;
        });
    });
    $("#tab-1").children().children().find("tbody").html(html);
});

this代表当前对象的意思，这里取到的每个属性都需要this来取，将得到的数据放到你想要的表格的位置，这里html字符串是可以进行累加的。这里用了一个很重要的思路，保证

第二个循环的第一条数据保持对齐，使用了一个技巧，这里以i作为一个变量，来做判断。