Więc próbuję utworzyć aplikację internetową, która po wprowadzeniu przez użytkownika liczby od 0 do 50 renderuje tę ilość obrazów psów. Jeśli nic nie jest przypisane, domyślnie wynosi 3. W tej chwili fetch pobiera dane, ale nie mogę ich renderować. Oto html za to:

   <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>

A to jest do tego 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();
}); 

To jest link repl.it, jeśli chcesz go zobaczyć https: //repl.it/@GianinaSkarlett/WYŚWIETLACZ-WIELE-LOSOWO-LOSOWO-OBRAZY-MVP

1
Gianina Skarlett 1 listopad 2018, 03:15

1 odpowiedź

Najlepsza odpowiedź

Twój kod jest dość zbliżony — wystarczyło tylko kilka drobnych poprawek, aby zadziałał. Rozważ poniższy przykład kodu (wraz z dokumentacją) jako jedną z opcji rozwiązania problemu:

/* 
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>
1
Dacre Denny 1 listopad 2018, 03:31