ajax php 循环输出html,Ajax+php想要实现回显，html前端显示，该怎么写？

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

html:

$(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);

},

})

})

active.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);

?>

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