ajax返回数据进行for双循环实现前端html渲染数据的解决方案

在这里插入图片描述

    //历史告警;
    function getAlert() {
        var alertHtml = "";
        $.ajax({
            type: 'post',
            async: true,
            data: {},
            url: './api/api.php?act=getAlert&token=3cab7ce4142608c0f40c785b5ab5ca24',
            dataType: "json",
            success: function (res) {
                if (res.data) {
                    for (var i = 0; i < res.data.length; i++) {
                        alertHtml += `<div class="pannel"> <div class="title"><span>${res.data[i].curTime}</span><span>过高告警:${res.data[i].highState}</span><span>过低告警:${res.data[i].lowState}</span></div>`;
                        //循环当天记录;
                        if (res.data[i].days) {
                            alertHtml += ` <ul>`;
                            for (var j = 0; j < res.data[i].days.length; j++) {
                                var coBg = getClass(res.data[i].days[j].state);
                                alertHtml += `<li><span>${res.data[i].days[j].curTime}</span><span class="stuNum${coBg}"></span><span>${res.data[i].days[j].remark}</span>`;
                            }
                            alertHtml += ` </ul>`;
                        }
                        alertHtml += `</div>`;
                    }
                    $("#alertContent").html(alertHtml);
                }
            },
            error: function (err) {
                console.log(err + "请求数据失败!");
            }
        });
    }

Done!

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页