我最近开始使用Javascript和API数组,以尝试了解如何检索和使用不同的API.
在StackOverflow和其他网站中,已经多次询问和回答了Javascript循环和数组的问题.
但是,我似乎无法找到(可能由于我缺乏理解和/或使用的关键字)正是我正在寻找的.
我目前的项目是创建一个WebApp,它从API中检索信息(我选择了random user API)并在屏幕上显示这些信息.
实施和问题
到目前为止,我一直专注于从API中检索特定数据(我已经在某种程度上成功完成)并在浏览器上显示它们.
我决定我想同时显示几个用户,将其限制为一次显示的15个用户(当刷新浏览器时,它应该随机显示另外15个用户(部分API)).
虽然我知道我可以直接请求多个用户,但是通过使用results parameter,我试图通过循环自己做这个,这样我就可以理解如何检索多个信息并将它们显示为列表.
履行
> HTML文件：非常基本,它包含一个主div,在div内部是一个无序列表元素,也包含一个元素.我将需要从HTML文件中删除某些元素,并让JS文件在我前进时通过innerHTML方法创建它们.
> CSS文件：现在非常基础,专注于JS文件.
> Javascript文件：现在也很基本.它包含带有获取的API URL的常量变量.它将数据检索为JSON,然后使用document.getElementById()在其指定的ID中添加特定信息(在本例中为名字和照片).
我研究了从API检索和显示信息的方法,到目前为止已经获得了基本的了解.
但是,我似乎已经停止了(因为我不完全了解如何使用for循环或map()来浏览我当前的JS代码并为N个用户显示相同的数据N次).
问题
在添加for循环之前,js文件检索一个随机用户所需的信息,这是我期望它做的.
但是,一旦我的for循环被添加,它就会停止显示任何内容,并且不会提供任何可以帮助我解决问题的错误消息.
我确实尝试了以下for循环,看看我是否至少了解了基础知识并在控制台中打印了结果：
for ( var i = 0; i < 15 ; i++) {
console.log(i)
}
我已将代码片段块附加到JSbin链接.在那里,您可以看到当前的状态和问题.
当前的HTML JS文件和输出(JS Bin)：在这个例子中,我已经注释掉for循环以显示它确实可以工作到某一点.
const testapi = fetch("https://randomuser.me/api/?gender=male");
/*for ( var i = 0; i < testapi.length ; i++) {*/
testapi
.then(data => data.json())
.then(data => document.getElementById('test').innerHTML = "
li {
display:flex;
flex-direction: column;
align-items:center;
box-shadow: 2px 4px 25px rgba(0,.1);
}
访问过的网站
> Loop through and pull in a certain amount of data
> Javascript for loop not looping through array
> JavaScript Loops
> Write JavaScript loops using map,filter,reduce and find
如果有更多要获取的URL,请在此处再次调用该函数：
请参见示例2如何使用模板文字
let cnt = 0;
const maxNum = 3;
function getEm() {
if (cnt >= maxNum) return; // stop
fetch("https://randomuser.me/api/?gender=male")
.then(data => data.json())
.then(data => {
document.getElementById('test').innerHTML += '
li {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 2px 4px 25px rgba(0,.1);
}
多个用户一次性使用模板文字：
let users = []
fetch("https://randomuser.me/api/?results=15")
.then(data => data.json())
.then(data => {
for (user of data.results) {
users.push(
`
li {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 2px 4px 25px rgba(0,.1);
}
