Javascript 如何使用AJAX和jQuery高效地显示数组元素

我已经使用AJAX从API检索了数据（6个用户），我只想使用JavaScript显示每个用户的姓名和头像。问题是，当我运行代码时，它会显示同一用户的6个副本，我不知道为什么

我已经使用了$each和其他方法，但它们似乎不起作用

var items = JSON.parse(xhr.responseText)

userData = items.data;

for (var i = 0; i < userData.length; i++){
  $("body").append("<div class = 'container'> " + "<div class = 'user'> " + "<div class = 'profile_picture'>" + "<img>" + "</img>" + "</div>" + "<div class = 'name'>" + "<h1>"+ "</h1>" + "</div>" + "</div>" + "</div>")

  imgEl = $("img")
  h1El = $("h1")

  $(imgEl).attr("src", userData[i].avatar)
  $(h1El).text(userData[i].first_name + " " + userData[i].last_name)   
}

var items=JSON.parse（xhr.responseText）
userData=items.data；
对于（var i=0；i我希望userData[I]会在数组中循环，但它只显示最后一个元素。
您的问题是由于您的全局
$（'img'）
和
$（'h1'）
选择器将页面上的所有图像和h1更新为最后一个。您只需要更新最后一个附加的图像和h1

解决这个问题的另一种方法是将html与javascript分离，更紧密地遵循关注点分离实践。使用html模板，您可以很容易地重用它并为每个条目注入所需的数据


var userData=[
{
阿凡达：'https://www.fakeurl.com/photo1.png',
名字：“杰克”，
姓：“布莱恩”
},{
阿凡达：'https://www.fakeurl.com/photo2.png',
名字：“吉尔”，
姓：“怀特”
}
];
var userTemplate=$（'#userTemplate'）.html（）；
$（document.body）.append(
userData.map（用户=>{
返回用户模板
.替换（“%USER\u AVATAR%”，USER.AVATAR）
.replace（“%USER\u LABEL%”，`${USER.first\u name}${USER.last\u name}`）
} )
)；

%用户标签%
您也可以在不设置模板的情况下执行此操作，如下所示：


var userData=[
{阿凡达：'https://via.placeholder.com/100/ffb000，名字：'Jake'，姓：'Blane'}，
{阿凡达：'https://via.placeholder.com/100/da0800，名：'Jill'，姓：'White'}]；
$（'body'）.append（userData.map）（u=>
""
+u、 first_name+“”+u.last_name+“”）。加入（“\n”）；
您正在添加多个容器，但您正在更改
$（'img'）
和
$（'h1'））
是全局选择器，将更改页面上的所有元素。不仅仅是最后一个附加元素。这真是太棒了，尽管从来没有这样做过。你只是将模板存储在页面上某个隐藏元素中吗？
是html5的一个伟大的新功能，但并非所有浏览器都支持它(仍未妥善处理)“永远不会。IE不会再收到任何功能更新。
对于IE支持来说也可以替代
@cars10m，如果我们谈论的是IE支持，模板文本还必须替换为字符串串联是的，非常正确，箭头函数语法
映射（u=>…）
我用过，也不起作用。；-）我投了反对票，因为你对

使用了，这已经被弃用了一段时间。请删除它；我们不需要告诉新开发人员关于它的情况，特别是因为它在严格模式下并不存在。对，是的，这是我可以处理的。特别是，在这种情况下，我真的不需要它。谢谢！