个人中心
文章发布
退出
作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
24
4
我最近开始研究 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/
24
4
0
如果我使用下面的代码，数据将为零 dispatch_async(dispatch_get_global_queue(0,0), ^{ UIImage *img = [[UIImage allo
fread来自 data.table包一般可以在读取文件时自动确定列分隔符( sep )。 例如，这里fread自动检测 |作为列分隔符: library(data.table) fread(past
因此，如果我有一个如下所示的数据框: A B C rowname1 4.5 4 3.2 rowname2 3 23
我有一个汽车模型的搜索数据库:“日产Gtr”，“Huynday Elantra”，“Honda Accord”等。 现在我还有一个用户列表和他们喜欢的汽车类型 user1喜欢:carId:1234，c
我正在使用 Javamail 来获取一些电子邮件数据。我将用户输入作为电子邮件 ID、imap 地址和密码并连接到 imap。然后我监视收件箱的电子邮件并查明此人是否在“收件人”或“抄送”中。 Ema
我有一些数据，我想根据差距统计来评估最佳簇数。 我阅读了 gap statistic 上的页面在 r 中给出了以下示例: gs.pam.RU Number of clusters (method '
我有一个用户名和密码组合，我将使用它通过 java 代码访问安全服务器。 我的想法是: 在外部存储加密凭据 执行时提示用户输入解密密码 在使用前将解密的凭据直接存储在字符数组中 使用凭据连接到数据库
这是 Firebase 数据:[Firebase 数据][1] 我必须从员工那里检索所有字段并将其存储在一个数组中。 现在数据更改 toast 消息即将到来，但已经很晚了。 Firebase.setA
我是 iOS 的新手，正在开发一个基本的应用程序，它目前正在使用 SSKeychain 和 AFNetworking 与 API 进行交互。当您使用我检索的应用程序登录并在我的 CredentialS
编辑:这个问题已经在 apphacker 和 ConcernedOfTunbridgeWells 的帮助下得到解决。我已更新代码以反射(reflect)我将使用的解决方案。 我目前正在编写一个群体智能
我是 C 的新手，我想编写一个程序来检查用户输入的单词是否合法。我已经在 stackoverflow 上搜索了建议，但很多都是针对特定情况的。请在我被激怒之前，我知道这个语法不正确，但正在寻找一些关于
我相信你们中的一些人编写过 C# 类，这些类必须从数据库设置密码/从数据库获取密码。 我假设敏感细节不会以明文形式显示。处理此类数据的推荐程序是什么？检索到的文本是否加密？您是否将 pws 存储在加密
我在 linux 上使用 2.7 之前的 python 版本，想知道如何检索 RUID？ 2.7 及更高版本从 os 包中获得了 getresuid，但我似乎找不到 2.6 的等效项 最佳答案 您可以
我已经在 Android 中实现了一个存储对象的标准 LRUCache。每个键都是与存储的对象关联的唯一 ObjectId。我的问题是从缓存中检索对象的唯一方法是通过 ObjectId(无迭代器)。实
这已经被问过很多次了。解决方案(对我有用)是从 packages.config 文件(这就足够了)和 packages 文件夹中删除 *** 包。 这对我来说是一个糟糕的解决方案，因为每次我想安装一些
我有以下文字: #{king} for a ##{day}, ##{fool} for a #{lifetime} 以及以下(损坏的)正则表达式: [^#]#{[a-z]+} 我想匹配所有#{word
我正在寻找一种快速(如高性能，而不是快速修复)解决方案来持久化和检索数千万个小型(大约 1k)二进制对象。每个对象都应该有一个用于检索的唯一 ID(最好是 GUID 或 SHA)。额外的要求是它应该可
有没有办法获取 RegInit 的重置值？通过探测产生的类型的成员？我可以看到 RegInit 将返回类型(例如 UInt )。例如，我将有一个寄存器，我想通过 regmap 对其进行控制。 val
Iv 目前接手了一个项目，其中开发人员在某些表的 json 数组列中存储了 has many 关系。 产品表 ---------------------------- id | product | c
Git 会在任何地方记录推送到远程的历史吗？ 我注意到我们能够在 Microsoft VSTS 中查看 Git 存储库的推送历史记录以及每次推送的相关提交。它甚至显示旧的、过时的提交，由于后来的强制推
我是一名优秀的程序员,十分优秀！