Récupérer résultats fetch d'une classe dans une autre classe (async/await)
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 :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
| 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 :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
| 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;
}
} |
