Javascript 使用循环遍历数据json值并将其显示到卡中

我在使用循环时遇到了一个问题，因为我不知道在这种情况下使用什么类型的循环（很抱歉，我还在学习jquery&js！）。在结果页面中，我创建了一张卡片，将每个数据与json分开，但我一直在讨论如何显示每张卡片中的数据。下面是详细信息：

结果示例

代码

将数据显示到卡片中


通过使用
，您已经有了一个循环。每个
问题在于您没有在js/html中传递/连接变量

但是div.container下面的第一个div仍然显示空数据，而从var html创建的div被添加时，您可以使用css或/和js隐藏/删除它

[1]使用css，js
.append（）


$（函数（）{
$（'.container>div'）.remove（）；
$.ajax({
url:“https://jsonplaceholder.typicode.com/posts",
成功：功能（结果）{
$。每个（结果、功能（索引、项目）{
var userId=item.userId；//这应该在div class=“卡头”中
var typeId=item.id；//这应该在div class=“卡头”中
var titleId=item.title；//应该在h5 class=“卡片标题”中
var bodyId=item.body；//这应该在p class=“卡片文本”中
var html=''；
html+='user:'+userId+'typeId:'+typeId+''；
html+=''；
html+=''+标题ID+''；
html+='
'+bodyId+'
'；
html+=''；
html+=''；
html+=''；
//使用下面的循环并注入到div.container
$（“.container”）.append（html）；
});
//console.log（'success'，result）；
//console.log（结果[0].body）；
//console.log（$（result.length）；
}
});
});
.card:第n个子项（1）{
显示：无；
}
.卡片{
利润率：20px；
填充：20px；
背景：#eee；
边框：1px实心#333；
}



通过使用
，您已经有了一个循环。每个
问题在于您没有在js/html中传递/连接变量

但是div.container下面的第一个div仍然显示空数据，而从var html创建的div被添加时，您可以使用css或/和js隐藏/删除它

[1]使用css，js
.append（）


$（函数（）{
$（'.container>div'）.remove（）；
$.ajax({
url:“https://jsonplaceholder.typicode.com/posts",
成功：功能（结果）{
$。每个（结果、功能（索引、项目）{
var userId=item.userId；//这应该在div class=“卡头”中
var typeId=item.id；//这应该在div class=“卡头”中
var titleId=item.title；//应该在h5 class=“卡片标题”中
var bodyId=item.body；//这应该在p class=“卡片文本”中
var html=''；
html+='user:'+userId+'typeId:'+typeId+''；
html+=''；
html+=''+标题ID+''；
html+='
'+bodyId+'
'；
html+=''；
html+=''；
html+=''；
//使用下面的循环并注入到div.container
$（“.container”）.append（html）；
});
//console.log（'success'，result）；
//console.log（结果[0].body）；
//console.log（$（result.length）；
}
});
});
.card:第n个子项（1）{
显示：无；
}
.卡片{
利润率：20px；
填充：20px；
背景：#eee；
边框：1px实心#333；
}


尝试使用以下解决方案：

要在字符串中绑定变量，请使用`

$(function() {
  var html = "";
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    success: function(result) {
      $.each(result, function(index, item) {
        html +=
          '<div class="card bg-light border-dark mb-3" style="max-width: 70rem;">';
        html += `<div class="card-header">userid: ${item.userId} - id: ${item.id}</div>`;
        html += '<div class="card-body">';
        html += `<h5 class="card-title">${item.title}</h5>`;
        html += `<p class="card-text">${item.body}</p>`;
        html += "</div>";
        html += "</div>";
        html += "</div>";
        //using .html() will display one card,use loop to display each card
      });
      $(".container").html(html);
    }
  });
});

$（函数（）{
var html=“”；
$.ajax({
url:“https://jsonplaceholder.typicode.com/posts",
成功：功能（结果）{
$。每个（结果、功能（索引、项目）{
html+=
'';
html+=`userid:${item.userid}-id:${item.id}`；
html+=''；
html+=`${item.title}`；
html+=`
${item.body}
`；
html+=“”；
html+=“”；
html+=“”；
//使用.html（）将显示一张卡，使用循环显示每张卡
});
$（“.container”）.html（html）；
}
});
});

请参见stackblitz演示中的以下内容：

尝试使用以下解决方案：

要在字符串中绑定变量，请使用`

$(function() {
  var html = "";
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/posts",
    success: function(result) {
      $.each(result, function(index, item) {
        html +=
          '<div class="card bg-light border-dark mb-3" style="max-width: 70rem;">';
        html += `<div class="card-header">userid: ${item.userId} - id: ${item.id}</div>`;
        html += '<div class="card-body">';
        html += `<h5 class="card-title">${item.title}</h5>`;
        html += `<p class="card-text">${item.body}</p>`;
        html += "</div>";
        html += "</div>";
        html += "</div>";
        //using .html() will display one card,use loop to display each card
      });
      $(".container").html(html);
    }
  });
});

$（函数（）{
var html=“”；
$.ajax({
url:“https://jsonplaceholder.typicode.com/posts",
成功：功能（结果）{
$。每个（结果、功能（索引、项目）{
html+=
'';
html+=`userid:${item.userid}-id:${item.id}`；
html+=''；
html+=`${item.title}`；
html+=`
${item.body}
`；
html+=“”；
html+=“”；
html+=“”；
//使用.html（）将显示一张卡，使用循环显示每张卡
});
$（“.container”）.html（html）；
}
});
});

请参见stackblitz演示中的以下内容：

html+='
'+bodyId+'
'与其他人的想法相同。。这就是您想要的吗？是的，可以这样做，但是div.container下面的第一个div在添加从var html创建的div时仍然显示空数据。所以我想的是