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

概述我最近开始使用Javascript和API数组,以尝试了解如何检索和使用不同的API.在StackOverflow和其他网站中,已经多次询问和回答了Javascript循环和数组的问题.但是,我似乎无法找到(可能由于我缺乏理解和/或使用的关键字)正是我正在寻找的.我目前的项目是创建一个WebApp,它从API中检索信息(我选择了random user 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);}

访问过的网站
> 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);}
          总结       
以上是内存溢出为你收集整理的Javascript：for循环检索并打印一定数量的API数据全部内容，希望文章能够帮你解决Javascript：for循环检索并打印一定数量的API数据所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
					
										


					

						
欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1119650.html