CODEWITHSUNDEEP
javascriptjqueryjsonfetch-api
Gianina Skarlett
Gianina Skarlett

Reputation: 55

JSON data not rendering to the DOM

I'm trying to create a web app that when a user inputs a number from 0 to 50 it renders that quantity of images of dogs. If nothing is input it defaults to 3. Right now fetch is retrieving the data but I can't seem to render it. This is the html for it:

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

and this is the JavaScript for it:

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();
});

This is the repl.it link if you want to see it https://repl.it/@GianinaSkarlett/DISPLAY-MULTIPLE-RANDOM-DOG-IMAGES-MVP

Upvotes: 1

Views: 632

Answers (1)

Dacre Denny
Dacre Denny

Reputation: 30360

You're code is fairly close - only a few minor adjustments were needed to get it to work. Consider the code sample below (with documentation) as one option to resolve your issue:

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

Upvotes: 1

Related Questions