javascript - 如何在我的 json 文件函数中访问结果 [0]?
问题描述
我正在使用链接生成 3 个不同的结果,我试图在我的“contactos”函数中访问结果 [0]、结果 [1] 或结果 [2] 中的内容,但我不知道该怎么做。我认为它可能必须在 For cicle 内,但它也不起作用。有人能帮我吗?(所有其他选择器都可以正常工作,但是在尝试使用 results[] 时它不起作用)在此先感谢。
getResultado();
function getResultado() {
fetch("https://randomuser.me/api/?results=3")
.then(function(response) {
return response.json();
}).then(function(json) {
for (var i =0; i<json.results.length; i++) {
console.log(json.results[i]);
objeto = json.results[i];
document.getElementById("json").appendChild(contactos(objeto));
}
});
}
function contactos(info){
let contactosElement = document.createElement("div");
contactosElement.classList.add("contactos");
let contactoElement = document.createElement("div");
contactoElement.classList.add("contacto");
contactosElement.appendChild(contactoElement);
let imagemElement = document.createElement("div");
imagemElement.classList.add("imagem");
contactoElement.appendChild(imagemElement);
let textoElement = document.createElement("div");
textoElement.classList.add("texto");
contactoElement.appendChild(textoElement);
let tituloElement = document.createElement("h3");
tituloElement.innerText = "Geral";
textoElement.appendChild(tituloElement);
let nomeElement = document.createElement("p");
nomeElement.innerText = "Nome: " + info.name.first;
textoElement.appendChild(nomeElement);
let mailElement = document.createElement("p");
console.log(this.results[0].email);
mailElement.innerText = "Email: " + info.results[0].email;
textoElement.appendChild(mailElement);
let telefoneElement = document.createElement("p");
telefoneElement.innerText = "Telefone: " + info.phone;
textoElement.appendChild(telefoneElement);
let fotografiaElement = document.createElement("img");
fotografiaElement.setAttribute('src', info.picture.large);
imagemElement.appendChild(fotografiaElement);
return contactosElement;
}
解决方案
这是对我的答案的重写,以完全适应您的想法。中心点是您需要遍历返回json.results
数组的元素。我这样做了json.results.map()
,为每个用户挑选出感兴趣的属性u
并将join()
它们编辑成一个 HTML 字符串,然后我将它放在#json
你页面的 div 中。
getResultado();
function getResultado() {
fetch("https://randomuser.me/api/?results=3")
.then(r=>r.json())
.then(json=>{
document.getElementById("json").innerHTML=
'<div "class=contacts">'+
json.results.map(u=>
`<div class="contacto">
<div class="imagem">
<img src="${u.picture.large}">
</div>
<div class="texto">
<h3>Geral</h3>
<p>${u.name.first} ${u.name.last}</p>
<p>${u.phone}</p>
<p>${u.email}</p>
</div>
</div>`).join('');
});
}
<h2>Contactos</h2>
<div id="json"></div>
我使用 ES6 模板语法来生成新的 HTML 字符串。document.createElement()
这比使用and的原始方法更容易处理(也更快)element.appendChild()
。
推荐阅读
- mysql - MySql5.6中创建复合外键时,为什么主键的位置相关?
- python - 在 multiprocessing.Pool 工作人员之间避免使用全局变量来实现不可提取的共享状态
- android - 为什么 Android Studio 模拟器非常慢?
- javascript - 每行显示 2 条记录
- javascript - 如何根据其他两个 HTML 输入之间的焦点切换隐藏/显示按钮?
- math - 1 到 1000 之间的数字,总和为 3
- java - 如何为泛型继承类型注入?
- php - 如何使用 DOMparser 在 div 中进行网页抓取
- go - 无法将 go lang 应用程序部署到 AWS Elastic Beanstalk
- python - 将 exec()/compile() 与用户输入一起使用