Xer*_*iem 5 html javascript css arrays for-loop
我最近开始使用Javascript和API数组,以尝试了解如何检索和使用不同的API.
在StackOverflow和其他网站中,已经多次询问和回答了Javascript循环和数组的问题.
但是,我似乎无法找到(可能由于我缺乏理解和/或使用的关键字)正是我正在寻找的.
我目前的项目是创建一个WebApp,它从API中检索信息(我选择了随机用户API)并在屏幕上显示这些信息.
到目前为止,我一直专注于从API中检索特定数据(我已经在某种程度上成功完成)并在浏览器上显示它们.我决定我想同时显示几个用户,将其限制为一次显示的15个用户(当刷新浏览器时,它应该随机显示另外15个用户(部分API)).
虽然我知道我可以直接请求多个用户,但是通过使用results参数,我试图通过循环自己做这个,这样我就可以理解如何检索多个信息并将它们显示为列表.
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 = "<h1>" + data.results[0].gender + "</h1>" + "<p>" + data.results[0].name.first + "</p>" + document.getElementById("myImg").setAttribute('src',data.results[0].picture.medium))
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
/*}*/li {
display:flex;
flex-direction: column;
align-items:center;
box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
}<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<ul>
<li>
<div id="test"></div>
<img src="" id="myImg" />
</li>
</ul>
</div>
<script src="script.js"></script>
</body>
</html>尝试一下 - 如果有更多 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>'+
"<h1>" + data.results[0].gender + "</h1>" +
"<p>" + data.results[0].name.first + "</p>" +
'<img src="'+data.results[0].picture.medium+'"/>'+
'</li>';
// here is the magic
cnt++;
getEm()
})
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
}
getEm()li {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
}<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div>
<ul id="test">
</ul>
</div>
<script src="script.js"></script>
</body>
</html>多个用户一次性使用模板文字：
let users = []
fetch("https://randomuser.me/api/?results=15")
.then(data => data.json())
.then(data => {
for (user of data.results) {
users.push(
`<li>
<h1>${user.gender}</h1>
<p>${user.name.first}</p>
<img src="${user.picture.medium}"/>
</li>`);
}
document.getElementById('test').innerHTML= users.join("");
})li {
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
}<div>
<ul id="test"></ul>
</div>