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

Gianina Skarlett спросил: 07 октября 2018 в 10:35 в: javascript

поэтому я пытаюсь создать веб-приложение, которое, когда пользователь вводит число от 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 => react.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();
}); 

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

0 ответов