Question

我正在加载Marvel的API，我希望在用户搜索API时显示“”的结果。但是，API需要一些时间来加载，因此当我尝试计算列表中的项目时，它会显示0，直到您再次单击搜索，然后它将在其中查看项目。

有没有办法告诉函数写'结果'等到API加载？

const key = '57acb95e5d18bf2ef168007fd66dd5ce';
const api_endpoint = 'https://gateway.marvel.com/v1/public/comics';


//Fetch API data


//Filter Comics based off Search Input

var form = document.getElementById('search-form')
form.onsubmit = function (ev) {
    ev.preventDefault();

    var filterValue = document.getElementById('searchbar').value.toUpperCase();
    var inputValue = document.getElementById('searchbar').value;
    const query = filterValue;
    const url = `${api_endpoint}?titleStartsWith=${filterValue}&apikey=${key}`;
    console.log(filterValue);
    fetch(url)

        .then(results => results.json())

        .then(resultsJSON => {
            console.log(resultsJSON.data.results)
            //Insert API data
            var newContent = '';
            for(var i = 0; i < resultsJSON.data.results.length; i++)
            {
                newContent += '<li class="comicItem"><article>'+ '<img src="' + resultsJSON.data.results[i].thumbnail.path + '.jpg' + '">';
                newContent += '<p>' + resultsJSON.data.results[i].title + '</p></article></li>';
            }
            var apiResults = document.querySelector('ul#comicList');
            apiResults.innerHTML = newContent;
        })

        .catch( error => {
            console.log('An Error Occurred:', error)
        })

    let ul = document.getElementById('comicList');

    let li = document.querySelectorAll('.comicItem');



    function inputResults() {
        var resultsHeader = document.getElementById('results-of-search');
        resultsHeader.innerHTML = li.length + " Results for \"" + inputValue + "\"";
    }

    for(let i = 0; i < li.length;i++){

    let a = li[i].getElementsByTagName('p')[0];
    if(a.innerHTML.toUpperCase().indexOf(filterValue) > -1){
    li[i].style.display = '';
    }

else {li[i].style.display = 'none';}

    }
    inputResults();
    }

Answer 1

您获取fetch promise之外的il元素，因此尚未呈现任何元素。

const key = '57acb95e5d18bf2ef168007fd66dd5ce';
const api_endpoint = 'https://gateway.marvel.com/v1/public/comics';


//Fetch API data


//Filter Comics based off Search Input

var form = document.getElementById('search-form');
form.onsubmit = function (ev) {
  ev.preventDefault();

  var filterValue = document.getElementById('searchbar').value.toUpperCase();
  var inputValue = document.getElementById('searchbar').value;
  const query = filterValue;
  const url = `${api_endpoint}?titleStartsWith=${filterValue}&apikey=${key}`;
  console.log(filterValue);
  fetch(url)

    .then(results => results.json())

    .then(resultsJSON => {
      console.log(resultsJSON.data.results);
      //Insert API data
      var newContent = '';
      for (var i = 0; i < resultsJSON.data.results.length; i++) {
        newContent += '<li class="comicItem"><article>' + '<img src="' + resultsJSON.data.results[i].thumbnail.path + '">';
        newContent += '<p>' + resultsJSON.data.results[i].title + '</p></article></li>';
      }
      var apiResults = document.querySelector('ul#comicList');
      apiResults.innerHTML = newContent;

      /* anything here will happen after li s are rendered */

      let ul = document.getElementById('comicList');

      let li = document.querySelectorAll('.comicItem');

      function inputResults() {
        var resultsHeader = document.getElementById('results-of-search');
        resultsHeader.innerHTML = li.length + " Results for \"" + inputValue + "\"";
      }

      for (let i = 0; i < li.length; i++) {

        let a = li[i].getElementsByTagName('p')[0];
        if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {
          li[i].style.display = '';
        }

        else { li[i].style.display = 'none'; }

      }
      inputResults();

    })

    .catch(error => {
      console.log('An Error Occurred:', error)
    });

  /* anything here will happen before fetch() */

}

https://stackblitz.com/edit/showing-results-for-api

显示API的结果

1 个答案: