实施和发布

Question

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

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

但是，我似乎无法准确找到我要找的东西（可能是由于缺乏理解和/或使用的关键字）。

我当前的项目是创建一个WebApp，该WebApp从API中检索信息（我选择了random user API），并将此信息显示在屏幕上。

实施和发布

到目前为止，我一直致力于从API检索特定数据（在某种程度上我已经成功做到了）并将其显示在浏览器上。我决定我想同时显示多个用户，并将其限制为一次显示15个用户（刷新浏览器时，它应该随机显示另外15个用户（API的一部分）。

尽管我知道我可以使用results parameter直接请求多个用户，但我还是尝试通过循环进行操作，以便了解如何检索多个信息并将其显示为列表。 / p>

实施

HTML文件：非常基本，它包含一个主div，在div内包含一个无序列表元素，该元素也包含一个元素。我将需要从HTML文件中删除某些元素，然后让JS文件通过 innerHTML 方法创建它们。
CSS文件：目前非常基本，主要关注JS文件。
JavaScript文件：目前也非常基本。它包含带有获取的API URL的常量变量。它使用 document.getElementById（）。以JSON形式检索数据，然后在其指定的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>

访问过的网站

Answer 1

可以解决这个问题-如果还有更多要提取的网址，我会在解析中再次调用该函数：

请参见示例2如何使用模板文字

SELECT recid, price, receive_date, c1.deduction 
FROM Cost c INNER JOIN 
     cost_types ct
     ON c.recid = ct.recid OUTER APPLY 
     (SELECT TOP (1) c1.*
      FROM  Cost c1
      WHERE c1.recid = c.recid AND c1.status = 'Y'
      ORDER BY ?? -- Use ordering column based on you want deduction 
     ) c1;
WHERE cost_year =  2018;

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);
}

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

实施和发布

实施

问题

访问过的网站

1 个答案: