Question

因此，我正在尝试创建一个Web应用程序，当用户输入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

您的代码非常接近-只需进行一些细微调整即可使其工作。将以下代码示例（包含文档）视为解决问题的一种选择：

var query = {
  "originator": "Bill",
  "owner_id": { "$ne": "Bill" },
  "$or": []
};

var updateBlock = { "$set": {} };
var arrayFilters = [];

if (phoneNumber) {
  query.$or.push({
    "shared.phones": phoneNumberMatch
  });

  updateBlock.$set['shared.phones.$[phone]'] = phoneNumber;

  arrayFilters.push({
    "phone": phoneNumberMatch
  });
}

if (emailAddress) {
  query.$or.push({
    "shared.email": emailAddressMatch
  });

  updateBlock.$set['shared.email.$[email]'] = emailAddress;

  arrayFilters.push({
    "email": emailAddressMatch
  });
}

Contacts.updateMany(query, updateBlock, arrayFilters, function(err, numAffected) {
  // work with callback
})

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

Json数据未呈现到DOM

1 个答案: