jquery拼接数据循环一个数据列表-蒲公英云

jquery拼接数据循环一个数据列表

但从后端请求过来json数据之后，需要把数据做成循环列表，那么，怎么jquery拼接数据循环一个数据列表？现在写一个简单的demo，效果如下所示：

参考代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>告警列表</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <style>
            .rightcont {
                height: 80px;
                margin-top: 12px;
                background: #f1f1f1;
                border-radius: 8px;
                padding-top: 15px;
            }            
            .iconalarm {
                float: left;
                width: 20%;
                text-align: center;
            }            
            .detailalarm {
                float: left;
                width: 65%;
            }            
            .namealarm {
                float: left;
                width: 15%;
            }
        </style>
    </head>
    <body>
        <div id="active">
            <ul class="rightalarm">
                <!--右侧报警监控 -->
                <div class="rightcont">
                    <div class="iconalarm">
                        <img src="images/fence/fence2.png" />
                        <p>sos</p>
                    </div>
                    <div class="detailalarm">
                        <p>2019-7-3 10:08</p>
                        <p>王大治发出SOS报警</p>
                    </div>
                    <div class="namealarm">
                        员工
                    </div>
                </div>
            </ul>
</div>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var cont = [{
                    "image1": "images/fence/fence1.png",
                    "alarmtype": "sos",
                    "date": "2019-7-3 10:08",
                    "details": "李一男进入二道门危险区域",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "危险",
                    "date": "2019-7-3 10:07",
                    "details": "孙二娘滞留生产车间8小时",
                    "alarmname": "访客"
                },
                {
                    "image1": "images/fence/fence3.png",
                    "alarmtype": "滞留",
                    "date": "2019-7-3 10:00",
                    "details": "马云脱岗窜岗报警",
                    "alarmname": "员工"
                },
                {
                    "image1": "images/fence/fence2.png",
                    "alarmtype": "脱岗",
                    "date": "2019-7-3 9:36",
                    "details": "王小婷走进办公室区域",
                    "alarmname": "访客"
                }
            ]
            var html = "";
            $.each(cont, function(k, v) { //这里的函数参数是键值对的形式，k代表键名，v代表值                
                html += '<div class="rightcont">';
                html += '<div  class="iconalarm">';
                html += '<img src=' + cont[k].image1 + ' />';
                html += '<p>' + cont[k].alarmtype + '</p> </div>';
                html += '<div  class="detailalarm">';
                html += ' <p>' + cont[k].date + '</p>';
                html += ' <p>' + cont[k].details + '</p></div>';
                html += ' <div  class="namealarm">' + cont[k].alarmname + ' </div></div>';
            });
            $(".rightalarm").append(html);
        })
    </script>
</html>