Filtre de recherche en direct JS non détecté dans l'erreur de promesse

2020-06-30 javascript json

Je travaille à travers une barre de recherche en direct avec javaScript et JSON et j'obtiens cette erreur et je ne peux pas le comprendre:

Uncaught (in promise) TypeError: Cannot set property 'innerHTML' of null
    at outputHtml (main.js:35)
    at searchStates (main.js:19)

Je ne sais pas pourquoi. De l'aide? Code:

const matchList = document.getElementById("matchList");

//search and filter data
const searchStates = async (searchText) => {
  const res = await fetch("../data/states.json");
  const states = await res.json();

  //find input matches
  let matches = states.filter((state) => {
    const regex = new RegExp(`^${searchText}`, "gi");
    return state.name.match(regex) || state.abbr.match(regex);
  });

  if (searchText.length === 0) {
    matches = [];
  }

  outputHtml(matches);
};

//show filtered results
const outputHtml = matches => {
  if (matches.length > 0) {
    const html = matches
      .map(
        match => `
        <div class="card card-body mb-1">
            <h4>${match.name} (${match.abbr}) <span class="text-primary">${match.capital}</span></h4>
            <small>Lat: ${match.lat} / Long: ${match.long}</small>
        </div>
        `
      )
      .join("");
    matchList.innerHTML = html;
  }
};

search.addEventListener("input", () => searchStates(search.value));

la ligne 19 est le outputHtml(matches); et la ligne 35 est matchList.innerHTML = html;

Answers

matchList n'est pas défini, veuillez ajouter une condition pour la vérifier

if (matchList && matches.length > 0)

Ou

matchList.innerHTML = html;

remplacer par

document.getElementById("matchList").innerHTML = html;

Related