想要Js中的div样式根据数据库中内容的数量循环自动生成，但是出错了

Question

已修改PHP

<?PHP
header("Content-Type: text/html; charset=utf-8");
include('conn.php');
$sql = 'select id,article_name from article';
$res = mysqli_query($conn,$sql);
$data = array();
while ($row = mysqli_fetch_assoc($res)) {
    $data[] = $row;
}
echo json_encode($data);
?>

JS

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url : "./php/active.php",//后台请求的数据，用的是PHP
            type : "post",//请求方式
            async : false,//是否异步请求
            success : function(data) { //如果请求成功，返回数据。
                var res = JSON.parse(data);
                var html = "";
                for(let i=0;i<res.length;i++){
                    html += "<div class='card_bordered' style='margin: 20px 0px; border-left: 4px solid rgb(24, 144, 255);'>
                    <div class='card_body'>
                        <div class='cardTitle'>
                            <span>
                                <span id='art_name' style='font-weight: 700;'>&nbsp;&nbsp;</span>
                                <span id='id' style='color: rgb(24, 144, 255); padding-left: 10px;'></span>
                            </span>
                            <span style='float: right;'>
                                <button type='button' class='btn_default' style='margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;'>
                                    <span>客户资料</span>
                                </button>
                                <button type='button' class='btn_default' style='margin-left: 15px; color: rgb(24, 144, 255); border-color: rgb(24, 144, 255); border-radius: 3px;'>
                                    <span onclick='javascript:window.location.href='edit.html''>编辑</span>
                                </button>
                                <button type='button' class='btn_default' style='margin-left: 15px; color: rgb(255, 97, 84); border-color: rgb(255, 97, 84); border-radius: 3px;'>
                                    <span>删除</span>
                                </button>
                            </span>
                        </div>
                        <div style='padding: 0px 20px; height: 80px;'>
                            <div class='row_flex' style='height: 80px;'>
                                <div class='col_span_1'>
                                    <p style='padding: 0px; line-height: 30px;'>推文地址：</p>
                                </div>
                                <div class='col_span' style='border-left: 1px solid rgb(222, 222, 222); padding-left: 10px;'>
                                    <p style='padding: 0px; line-height: 30px; font-size: 12px;'>状态：
                                        <span style='color: rgb(24, 144, 255);'>启用</span>
                                        <span style='color: rgb(130, 130, 130); display: none;'>停止</span>
                                    </p>
                                    <p style='padding: 0px; line-height: 30px;'>
                                        <button type='button' class='btn_default' style='background: rgb(24, 144, 255); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none; display: none;'>
                                            <span>开始</span>
                                        </button>
                                        <button type='button' class='btn_default' style='background: rgb(247, 179, 57); color: rgb(255, 255, 255); border-radius: 3px; padding: 0px 10px; border: none;'>
                                            <span>停止</span>
                                        </button>
                                    </p>
                                </div>
                                <div class='col_span' style='text-align: right; position: relative;'>
                                    <div style='position: absolute; width: 60px; height: 60px; right: 0px; top: -30px;'>
                                        <img src='./image/1599475563268843.png' style='width: 100%; height: 100%;'>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>";
                console.log(res[i].id);
                console.log(res[i].article_name);
                $("#article_name").append(res[i].article_name);
                $("#id").append("[ID:" + res[i].id + "]");
                }
                $("#tw_xinxi").append(html);
                $("#article_name").append(res[i].article_name);
                $("#id").append("[ID:" + res[i].id + "]");
            },
        })
     })
</script>

数据库

效果图

已修改PHP代码，console.log(res)输出为
▼Array(2)

▶0: {id: "1", article_name: "4124214"}
▶1: {id: "3", article_name: "666657"}
length: 2
▶__proto__: Array(0)

我想要输出id和art_name在前端div中，console.log(res[i].id)放在for循环里面，能获取到两个数组id,$("#id").append("[ID:" + res[i].id + "]")在for里不报错但也不显示，在for循环外面，会报错，找不到i，我现在id和art_name输出不出来。

Answer 1

res的length为4你循环肯定是4个