Bonjour à tous

Je tente désespéramment de récupérer le résultat du fetch effectué dans la classe Search.js pour l'exploiter dans la classe Combobox.js mais le résultat revient en "undefined"...

D'autre part, il semblerait que les async/await sont ignorés du côté de Combobox.js, les await sont soulignés dans le code qui me dit 'await has no effect on the type of this expression'.

J'ai essayé de mettre les fonctions dans le bon ordre d'éxécution dans le init(), ça ne change rien...

Je signale que le fetch retourne bien les résultats escomptés depuis Search.js

Merci d'avance pour toute aide

Search.js :

export class Search {
  /**
   * @param { String } url Spécifie l'url requise (controller)
   * @param {string} method Spécifie la méthode GET ou POST
   * @param { String } searchInputId Spécifie l'id du champ de recherche ciblé
   * @param { String } resultsFieldId Spécifie l'id du champ d'affichage des résultats
   * @param {boolean} createList (false par défaut) Spécifie si le résultat doit être présenté en tant que liste dans le champ de résultats
   */
  constructor(url, method, searchInputId, resultsFieldId, createList = false) {
    this.url = url;
    this.method = method;
    this.searchInputId = searchInputId;
    this.resultsFieldId = resultsFieldId;
    this.resultsFieldId = document.querySelector(`#${this.resultsFieldId}`);
    this.searchInputId = document.querySelector(`#${this.searchInputId}`);
    this.createList = createList;  
  }

  fetchData() {
    let data;
    let response = "";
    let timeout = null;
    const formData = new FormData();

    this.searchInputId.addEventListener("keyup", (e) => {
      e.preventDefault();
      let recherche = this.searchInputId.value;

      if (recherche.length > 0) {
        if (timeout !== null) {
          clearTimeout(timeout);
        }
        timeout = setTimeout(() => {
          rechercher(formData, recherche);
        }, 1000);
      }
    });
    const rechercher = async (formData, recherche) => {
      try {
        if (this.method === "POST") {
          formData.append("recherche", recherche);
          response = await fetch(this.url, {
            method: this.method,
            headers: {
              Accept: "application/json",
              "X-Requested-with": "XMLHttpRequest",
            },
            body: formData,
          });
        } else {
          response = await fetch(`${this.url}${recherche}`, {
            method: this.method,
            headers: {
              Accept: "application/json",
              "X-Requested-with": "XMLHttpRequest",
            },
          });
        }

        if (response.ok) {
          data = await response.json();
          this.resultsFieldId.innerHTML = "";
          if (data || data.content !== "") {
            if (this.createList) {
              //Crée une liste de valeurs pour autocomplete
              const ul = document.createElement("ul");

              data.map((el) => {
                let li = document.createElement("li");
                li.textContent = el.nom + " " + el.prenom;
                ul.append(li);
              });
              this.resultsFieldId.append(ul);
              //
            } else {
              //Affiche simplement le résultat dans le champ en fragment HTML
              this.resultsFieldId.insertAdjacentHTML(
                "afterbegin",
                data.content
              );
            }
          } else {
            this.resultsFieldId.innerHTML = `<p class="alert">Aucun résultat trouvé avec ces termes : "${this.searchInputId.value}"</p>`;
          }

          console.log("data depuis classe Search.js = ", data);
          return data;
        }
      } catch (error) {
        console.log(error);
      }
    };
  }

}

Combobox.js :

import { Search } from "./Search.js";

export class Combobox extends Search {
  /**
   * @param {string} wrapperDiv Id de la Div recevant le combobox
   * @param {string} comboboxLabel titre du label du combobox
   */

  constructor(wrapperDiv, comboboxLabel, url, method) {
    super(url, method);
    this.comboboxLabel = comboboxLabel;
    this.wrapperDiv = document.querySelector(`#${wrapperDiv}`);

    //Initialisation des fonctions dans l'ordre
    this.init();
  }

  init() {
    this.createCombobox();
  }

  createCombobox() {
    //Création du combobox de recherche

    //Création du label de combobox
    this.labelCombobox = document.createElement("span");
    this.labelCombobox.className = "combobox-label";
    this.labelCombobox.textContent = this.comboboxLabel;

    this.combobox = document.createElement("div");
    this.combobox.className = "combobox-content";
    this.combobox.id = "combobox";

    //label du champ de recherche
    const labelSearchInput = document.createElement("label");
    labelSearchInput.htmlFor = "search-input";
    labelSearchInput.innerText = "Rechercher";

    //création du champ input de recherche
    const searchInput = document.createElement("input");
    searchInput.type = "search";
    searchInput.className = "form__input search-input";
    searchInput.id = "combobox-search-input";
    this.searchInputId = searchInput.id;
    console.log(this.searchInputId);

    //Création de la liste de résultats autocomplete
    const searchResultsList = document.createElement("div");
    searchResultsList.className = "search-results-list";
    searchResultsList.id = "search-results-list";
    this.searchResultsListId = searchResultsList.id;

    //section liste des éléments sélectionnés
    const selectedItemsList = document.createElement("div");
    selectedItemsList.className = "selected-items-list";
    selectedItemsList.id = "selected-items-list";

    //Application des champs dans le wrapper "combobox"
    this.combobox.append(
      labelSearchInput,
      searchInput,
      searchResultsList,
      selectedItemsList
    );

    //Création du combobox dans la div renseignée
    this.wrapperDiv.append(this.labelCombobox, this.combobox);

    this.searchItems();
  }
  //lancement de la requête fetch dans la classe Search.js
  async searchItems() {
    let search = await new Search(
      this.url,
      this.method,
      this.searchInputId,
      this.searchResultsListId,
      true
    );

    let results = await search.fetchData();
    console.log("data depuis la classe Combobox.js = ", results);

    return results;
  }
}

Aucune réponse