Javascript: цикл for для извлечения и печати определенного количества данных API - PullRequest
Новая
       0

Javascript: цикл for для извлечения и печати определенного количества данных API

0 голосов
/ 27 февраля 2019

Я недавно начал играть с массивами Javascript и API, чтобы попытаться понять, как извлекать и работать с различными API.

Вопрос о циклах и массивах Javascript задавался и отвечался несколько раз.и здесь, в StackOverflow, и на других сайтах.

Однако мне кажется, что я не могу найти (потенциально из-за недостатка понимания и / или используемых ключевых слов) именно то, что ищу.

Мой текущий проект - создание WebApp.который извлекает информацию из API (я выбрал случайный пользовательский API ) и отображает эту информацию на экране.

Реализация и выпуск

До сих пор я сосредоточился наизвлечение определенных данных из API (что мне удалось сделать в определенной степени) и отображение их в браузере.Я решил, что хочу показывать несколько пользователей одновременно, ограничив его показом 15 пользователей одновременно (при обновлении браузера он должен показывать еще 15 пользователей случайным образом (часть API)).

Хотя я знаю, что могу напрямую запрашивать нескольких пользователей, используя параметр результатов , я пытаюсь сделать это самостоятельно с помощью циклов, чтобы я мог понять, как извлечь несколько данных и отобразить их в виде списков.

Реализация

  • HTML-файл : очень простой, он содержит основной div и внутри div неупорядоченный элемент списка, также содержащий элемент.Мне нужно будет удалить некоторые элементы из HTML-файла и сделать так, чтобы JS-файл создавал их с помощью метода innerHTML по мере продвижения вперед.

  • CSS-файл : на данный момент очень простой, фокусируясь на файле JS.

  • Файл Javascript : на данный момент тоже довольно простой.Он содержит постоянную переменную с выбранным URL-адресом API.Он извлекает данные в виде JSON, а затем добавляет конкретную информацию (в данном случае имя и фотографию) в свои указанные идентификаторы, используя document.getElementById () .

Я исследовал методы извлечения и отображения информации из API и получил базовое понимание.Тем не менее, я, кажется, остановился (потому что я не совсем понимаю, как использовать for-loops или map () , чтобы просмотреть мой текущий код JS и отобразить то же самоеданные N количество раз для N количество пользователей).

выпуск

Перед добавлением цикла for файл js извлекает необходимую информацию об одном случайном пользователе, чего я и ожидалэто делать.Однако, как только мой цикл for был добавлен, он перестает отображать что-либо и не выдает никаких сообщений об ошибках, которые могли бы помочь мне решить проблему.

Я попробовал следующий цикл for, чтобы проверить, не был ли у меняпо крайней мере, понял основы и напечатал результаты в консоли: 

for ( var i = 0; i < 15 ; i++) {
    console.log(i)
}

Я прикрепил блок фрагментов кода к ссылке 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>

Посещенные сайты

1 Ответ

0 голосов
/ 27 февраля 2019

Попробуем - я снова вызываю функцию в разрешении, если есть еще 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...