Javascript console.log循环json数据但不显示

我试图在页面上显示json数据，但是当将输出发送到html时，它只显示最后一个id

使用

console.log

时，它会循环遍历每个可用的id，但不会在页面输出本身上循环

var username = $("#usernameinfo").text();

$.ajax({
    type: "GET",
    dataType: 'json',
    url: "<?= base_url()?>"+"account/listings/more_user_ads",
    data: {
        "username": username,
        "pid": "<?=$this->input->get('pid')?>"
    },
    success: function(res){
        for (var i = 0; i < res.length; i++){
            var output = "";
            var object = res[i];

            output = "<p>" + object.id + "</p>";
            $("#tg-authoradsslider").html(output);
            // outputs only the id of 3 which is the last id in the loop

            console.log(output);
            /* consoles.logs 
            <p>1</p>
            <p>2</p>
            <p>3</p>*/
        }
    }
});

var username=$（“#usernameinfo”）.text（）；
$.ajax({
键入：“获取”，
数据类型：“json”，
url:“+”帐户/列表/更多用户广告”，
数据：{
“用户名”：用户名，
“pid”：”
},
成功：功能（res）{
对于（变量i=0；i”；
$（“#tg authoradslider”）.html（输出）；
//仅输出循环中最后一个id的id 3
控制台日志（输出）；
/*控制台日志
一,

二,

3
*/
}
}
});

.html（）

删除旧数据并粘贴新数据。这就是为什么你只能得到最后一张唱片

使用

for（var i=0；i
.html（）
删除旧数据并粘贴新数据。这就是为什么只获取最后一条记录

使用

for（var i=0；i您有两个问题

在每次迭代中重新初始化
输出
，将其设置回空字符串

在每次迭代中替换HTML中的内容，以便只显示最后一个内容

进行以下更改以解决这些问题：

改变

for (var i=0;i<res.length;i++){
    var output ="";
    var object = res[i];
    output = "<p>"+object.id+"</p>";
    $("#tg-authoradsslider").html(output);
}

for（var i=0；i您有两个问题

在每次迭代中重新初始化
输出
，将其设置回空字符串

在每次迭代中替换HTML中的内容，以便只显示最后一个内容

进行以下更改以解决这些问题：

改变

for (var i=0;i<res.length;i++){
    var output ="";
    var object = res[i];
    output = "<p>"+object.id+"</p>";
    $("#tg-authoradsslider").html(output);
}

for（var i=0；i更改循环：

将这些包含在代码中
1.
模板文本
2.使用
append
代替html

let output ="";
for (let i=0;i<res.length;i++){
    let object = res[i];
    output += `<p>${object.id}</p>`;
}
$("#tg-authoradsslider").append(output);

let output=”“；
对于（让i=0；i更改循环：

将这些包含在代码中
1.
模板文本
2.使用
append
代替html

let output ="";
for (let i=0;i<res.length;i++){
    let object = res[i];
    output += `<p>${object.id}</p>`;
}
$("#tg-authoradsslider").append(output);

let output=”“；
对于（让i=0；i，因为您已经在使用jQuery，所以只需利用一些已经存在的内置功能

success: function(res){
    var author = $("#tg-authoradsslider");
    res.forEach( r => author.append($("<p>").text(r.id)) );
}

成功：功能（res）{
var author=$（“#tg authoradslider”）；
res.forEach（r=>author.append（$（“”）.text（r.id））；
}

下面是一个使用模拟环境的快速演示


var res=[
{id:1}，
{id:2}，
{id:3}
];
var author=$（“#tg authoradslider”）；
res.forEach（r=>author.append（$（“”）.text（r.id））；
既然您已经在使用jQuery，只需利用其中的一些内置功能即可

success: function(res){
    var author = $("#tg-authoradsslider");
    res.forEach( r => author.append($("<p>").text(r.id)) );
}

成功：功能（res）{
var author=$（“#tg authoradslider”）；
res.forEach（r=>author.append（$（“”）.text（r.id））；
}

下面是一个使用模拟环境的快速演示


var res=[
{id:1}，
{id:2}，
{id:3}
];
var author=$（“#tg authoradslider”）；
res.forEach（r=>author.append（$（“”）.text（r.id））；

chris keenan你检查过我的答案吗？chris keenan你检查过我的答案吗？