Javascript 使用API请求将多个随机JSON数据输出到屏幕

使用下面的代码，我能够从jsonplaceholder.com检索用户名

我可以使用console.log查看ALL用户名，我无法在屏幕上输出ALL这些项目

输出仅为一个数组项。 使用

用户名[0]，用户名[1]

输出相同的项目？！ 使用

userName[0].textContent=info[1]输出用户名的第一个字母

谢谢你的帮助

谢谢大家!


（函数（）{
//设置api地址
const usersJSON=”https://jsonplaceholder.typicode.com/users";
const commentsJSON=”https://jsonplaceholder.typicode.com/comments";
//用户功能//
//生命-获取、解析、捕获
（函数getData（）{
//获取数据
获取（usersJSON）
.然后（功能（响应）{
返回response.json（）；
})
//解析为json
.then（功能（数据）{
//用户名
for（设i=0；i})();您可能要做的第一件事是使用ID，并使用
getElementById
获取项目，然后可以删除循环以使函数更简单（除非您有多个要附加名称的类）

您的问题是您正在使用
=
，这会覆盖以前设置的文本/数据，这就是您看到一个项目的原因。您将从数组中添加第一个项，然后在下一个循环迭代中用数组中的下一个项替换它

这里有两种不同的解决方案来解决您的问题：

使用
+=
附加数据而不是覆盖数据：

function displayName(info) {
  const userName = document.getElementById("users");
  userName.innerHTML += '<p>' + info + '</p>';
}

function displayName(info) {
  const userName = document.getElementById("users")
  const p = document.createElement('p')
  p.textContent = info
  userName.appendChild(p)
}


（函数（）{
//设置api地址
const usersJSON=”https://jsonplaceholder.typicode.com/users";
const commentsJSON=”https://jsonplaceholder.typicode.com/comments";
//用户功能//
//生命-获取、解析、捕获
（函数getData（）{
//获取数据
获取（usersJSON）
.然后（功能（响应）{
返回response.json（）；
})
//解析为json
.then（功能（数据）{
//用户名
for（设i=0；i'；
}
})();
})();
您多次调用
displayName
，每次都传递一个随机用户名
displayName
依次将该名称放入前两个
.userName
元素中，因此无论姓氏是什么，都会显示在这两个元素中。你想要这个吗？将号码替换为
i
：
用户名[0]。textContent
，然后删除第二个呼叫。还可以使用
+=
或在数据中添加新元素。使用
=
您正在覆盖上一个呼叫。@ChrisG-这就是发生的情况，而不是我想要的。我有5张卡片，每张都需要自己的名字——来自jsonplaceholder。完美的回答！谢谢你急需的帮助！