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

Question

i am using a link to generating 3 different results, i am trying to access things in results[0], results[1] or results[2] in my "contactos" function but i don´t know how to do it. I thought it maybe has to be inside a For cicle, but it doesn´t work either. Can someone help me? (every other selector works fine, but when trying to use results[] it does not work) thanks in advance.

 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

This is a re-write of my answer to fully accommodate what you had in mind. The central point is that you need to loop over the elements of the returned json.results array. I did this with json.results.map() , picked out the properties of interest for each user u and join() -ed them into an HTML string which I then placed in the #json div of your page.

 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>

I used the ES6 templating syntax to generate the new HTML string. This is easier to handle (and faster) than your original approach using document.createElement() and element.appendChild() .