ajax能获取到php的返回值，显示在html前端上面却是undefined，该怎么修改？

active.php：

<?PHP
    include('conn.php');//链接数据库
    $sql = "select * from article";
    $res = mysqli_query($conn,$sql);
    // 创建backResult空对象
    $arr = [];
    // 执行while循环语句,循环数据库查询的结果集,并使用fetch_array()取出每条记录
    while ($row = $res->fetch_assoc()){
        $arr[] = $row['article_name'];
        $arr[] = $row['id'];
    }
    // 打印返回给前台的json数据
    echo json_encode($arr);
?>

HTML：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<span id="article_name" style="font-weight: 700;">&nbsp;&nbsp;</span>
<span id="id" style="color: rgb(24, 144, 255); padding-left: 10px;"></span>
<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            url : "./php/active.php",//后台请求的数据，用的是PHP
            dataType : "json",//数据格式
            type : "post",//请求方式
            async : false,//是否异步请求
            success : function(msg) { //如果请求成功，返回数据。
                console.log(msg);
                var str = "";
                var str2 = "";
                $.each(msg,function(i,n){ //$.each()是对数组，json的遍历。
                    str += n.article_name;
                    str2 += "[ID:" + n.id + "]";
                })
                $("#article_name").append(str);
                $("#id").append(str2);
            },
        })
    })
</script>

HTML中console.log(msg)能返回出数据，但是后面遍历数组，输出在html上面，却是undefined，请问各位大佬们，该怎么修改能获取显示？

console.log(msg); 输出什么
json里面每个条目，有没有 article_name 的属性

改后台代码

<?PHP
include('conn.php');//链接数据库
$sql = "select * from article";
$res = mysqli_query($conn,$sql);
// 创建backResult空对象
$arr = [];
$i = 0;
// 执行while循环语句,循环数据库查询的结果集,并使用fetch_array()取出每条记录
while ($row = $res->fetch_assoc()){
$arr[$i]['article_name'] = $row['article_name'];
$arr[$i]['id'] = $row['id'];
}
// 打印返回给前台的json数据
echo json_encode($arr);
?>