Javascript:for循环检索并打印一定数量的API数据

前端之家收集整理的这篇文章主要介绍了Javascript:for循环检索并打印一定数量的API数据前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我最近开始使用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);
}
Meta charset="utf-8">
    

访问过的网站

> 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);
}
Meta charset="utf-8">
  

多个用户一次性使用模板文字

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);
}
原文链接:https://www.f2er.com/html/425666.html

猜你在找的HTML相关文章