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

转载作者：太空狗更新时间：2023-10-29 16:03:41

我最近开始研究 Javascript 和 API 数组，以尝试了解如何检索和使用不同的 API。

关于 Javascript 循环和数组的问题已经在 StackOverflow 和其他网站上被多次询问和回答。

但是，我似乎无法找到(可能是由于我缺乏理解和/或使用了关键字)我正在寻找的东西。

我当前的元素是创建一个从 API 检索信息的 Web 应用程序(我选择了 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-loops或map()来遍历我当前的JS代码并显示对于 N 个用户，相同的数据 N 次)。

问题

在添加 for 循环之前，js 文件会检索一个随机用户的所需信息，这正是我所期望的。但是，一旦添加了我的 for 循环，它就会停止显示任何内容，并且不会提供任何可以帮助我解决问题的错误消息。

我确实尝试了以下 for 循环，看看我是否至少了解了最基本的知识并在控制台中打印了结果:

for ( var i = 0; i < 15 ; i++) {
    console.log(i)
}

我已将代码片段 block 附加到 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>

关于Javascript:for 循环检索并打印一定量的 API 数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54905225/

文章推荐： c - 如何从结构内部释放动态分配的内存？

文章推荐： android继承activity(Base - Main activity)

文章推荐： c - 这段代码在哪里生成随机数？

文章推荐： javascript - HTML5 Web Worker 是线程还是进程？

太空狗

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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

实现和问题

实现

问题

访问过的网站