Данные JSON не отображаются в DOM

Question

, поэтому я пытаюсь создать веб-приложение, которое, когда пользователь вводит число от 0 до 50, отображает это количество изображений собак. Если ничего не вменяется, по умолчанию используется значение 3. Сейчас fetch извлекает данные, но я не могу их отобразить. Это html для него:

   <div class="container">
  <h1>Dog API: Display Multiple Random Dog Images</h1>

  <form action="#" class="js-search-form">
    <label for="query"></label>
    <input required type="text" class="js-query" value="3"">
    <button class="js-submit" type="submit">Search</button>
  </form>

  <section class="results hidden js-results">
    <!--<img class="results-img" alt="placeholder">-->
  </section>

</div>

и это Javascript для него:

function getDogImages(query) {
 fetch(`https://dog.ceo/api/breeds/image/random/${query}`)
 .then(response => response.json())
 .then(responseJson => {
  console.log(responseJson)
  return responseJson
 }) 
 .then(responseJson => displayResults(responseJson))
 .catch(error => alert('Something went wrong. Try again later.'));
}


function displayResults(responseJson) {
 return `
 <div>
  <h2>Here are your dog pictures</h2>
  <img src="${responseJson.answers}" class="results-img">
 </div>
 ` ;
 }

function displayDogSearchData(data) {
 const results = data.items.map((item, index) => displayResults(item));
 $('.js-results').html(results);

 $('.results').removeClass('hidden');
}


function listenToInput() {
 $('.js-search-form').submit(event => {
  event.preventDefault();
  const queryTarget = $(event.currentTarget).find('.js-query');
  const query = queryTarget.val();
  queryTarget.val("3")
  getDogImages(query, displayDogSearchData);
 });
}


$(function() {
 console.log('App loaded! Waiting for submit!');
 listenToInput();
}); 

Это ссылка на repl.it, если вы хотите ее увидеть https://repl.it/@GianinaSkarlett/DISPLAY-MULTIPLE-RANDOM-DOG-IMAGES-MVP

Answer 1

Ваш код довольно близок - для его работы потребовалось всего несколько незначительных изменений. Рассмотрим пример кода ниже (с документацией) как один из вариантов решения вашей проблемы:

/* 
Add displayCallback parameter, which is called to perform
html/dom update on success 
*/
function getDogImages(query, displayCallback) {
 fetch(`https://dog.ceo/api/breeds/image/random/${query}`)
 .then(response => response.json())
 .then(responseJson => {
  console.log(responseJson)
  return responseJson
 }) 
 .then(responseJson => displayCallback(responseJson))
 .catch(error => alert('Something went wrong. Try again later.'));
}


function displayResults(responseJson) {
 
 /*
 Update the code below to insert responseJson directly as image src
 */
 return `
 <div>
  <h2>Here are your dog pictures</h2>
  <img src="${responseJson}" class="results-img">
 </div>
 ` ;
 }

function displayDogSearchData(data) {

 /*
 Access message from data, as per API response format
 */
 const results = data.message.map((item, index) => displayResults(item));
 $('.js-results').html(results);

 $('.results').removeClass('hidden');
}


function listenToInput() {
 $('.js-search-form').submit(event => {
  event.preventDefault();
  const queryTarget = $(event.currentTarget).find('.js-query');
  const query = queryTarget.val();
  queryTarget.val("3")
  
  /*
  Add displayDogSearchData as second argument to getDogImages
  as per callback above 
  */
  getDogImages(query, displayDogSearchData);
 });
}


$(function() {
 console.log('App loaded! Waiting for submit!');
 listenToInput();
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container">
  <h1>Dog API: Display Multiple Random Dog Images</h1>

  <form action="#" class="js-search-form">
    <label for="query"></label>
    <input required type="text" class="js-query" value="3"">
    <button class="js-submit" type="submit">Search</button>
  </form>

  <section class="results hidden js-results">
    <!--<img class="results-img" alt="placeholder">-->
  </section>

</div>