Как я могу получить результаты [0] в моей функции файла json? - PullRequest
Новая
       34

Как я могу получить результаты [0] в моей функции файла json?

0 голосов
/ 23 декабря 2019

Я использую ссылку для получения 3 разных результатов, я пытаюсь получить доступ к вещам в результатах [0], результатах [1] или результатах [2] в моей функции "contactos", но я не знаю, как это сделатьЭто. Я думал, что это может быть внутри For Cicle, но это тоже не работает. Кто-нибудь может мне помочь? (любой другой селектор работает нормально, но при попытке использовать результаты [] он не работает) заранее спасибо. 

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;

}

1 Ответ

0 голосов
/ 23 декабря 2019

Это переписать мой ответ, чтобы полностью учесть то, что вы имели в виду. Суть в том, что вам нужно перебрать элементы возвращаемого массива 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().

...