如何在我的 json 文件函数中访问结果 [0]？

Question

我正在使用一个链接来生成 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;

}

Answer 1

这是对我的答案的重写，以完全适应您的想法。中心点是您需要遍历返回的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() 和element.appendChild() 的原始方法更容易处理（而且速度更快）。