Variable résultat de Fetch reste undefined malgré await/async

Par Jean Sérien, il y a 2 ans

Javascript
PHP Symfony

Bonjour à tous,

Je n'arrive pas à ce que la variable colDepenses qui est un tableau préparé pour chart.js soit enregistrée suite à mon fetch pour être disponible dans le reste du code, elle reste "undefined".
J'ai pourtant utilisé la méthode async/await et je vois bien le bon tableau de valeurs si je mets un console.log dans le fetch, mais dès que je sollicite la variable ailleurs dans le code elle devient undefined !

Que fais-je mal ?

Merci d'avance

const filtreAnneeDepenses = (selectionAnnee) => { let formData = new FormData(); formData.append("selectionAnnee", selectionAnnee); for (let item of formData) { console.log(item[0], item[1]); } let colDepenses async function statsDepenses() { let response = await fetch("/admin/statistiques", { body: formData, method: "POST", cache: "no-cache", headers: { "X-Requested-With": "XMLHttpRequest" } }) let colDepenses = await response.json(); return colDepenses }; statsDepenses() } // Obtenir dernier mois contenu dans le select et afficher les dépenses au démarrage de la page if (selectAnneesDepenses.value) { let selectionAnnee = selectAnneesDepenses[0].value; selectAnneesDepenses.value = selectionAnnee; filtreAnneeDepenses(selectionAnnee); } selectAnneesDepenses.addEventListener("change", (e) => { let selectionAnnee = e.target.value; filtreAnneeDepenses(selectionAnnee); }); // Graphique dépenses const afficherGraphique = (colDepenses) => { let graph = new Chart(graphDepenses, { type: "line", data: { labels: [ "Janv", "Févr", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc", ], datasets: [ { label: "Dépenses pour l'année", data: colDepenses, backgroundColor: [ "red", "blue", "green", "red", "blue", "green", "red", "blue", "green", "red", "blue", "green", ], borderWidth: 1 }, ] } }) }; afficherGraphique() </script>

3 réponses

Soundboy39, il y a 2 ans

Hello,

C'est parce qu'à aucun moment tu n'assigne de valeur à "colDepenses".

Déjà, tu a 2 variables qui ont le même nom, certe pas utilisées dans le même scope, mais c'est quand même un gros risque de s'emmêler les pinceaux...

Pour commencer, essaie de remplacer :

let colDepenses = await response.json(); return colDepenses

par

colDepenses = await response.json();
Jean Sérien, il y a 2 ans

Merci beaucoup Soundboy39 pour ta réponse.

J'ai avancé ..., il n'y a plus de message comme quoi la variable serait "undefined" et j'ai bien mon tableau qui revient en réponse json() mais curieusement le graphique est présent mais ne se remplit pas ... lorsque je regarde en console j'ai bien la réponse json() correcte à chaque fetch mais le tableau est précédé d'un "0:" :
par exemple :
0:"[0,66536.07,21216.160000000003,52111.55,0,89264.48000000001,0,0,29522.000000000004,0,41984.43,0]"
Faut il reformatter le tableau ou la variable ?
J'avoue sécher sur ce coup là, ça doit être tout bête ...

{% block javascripts %} <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script> <script type="text/javascript"> const selectAnneeDepenses = document.querySelector(".selectAnneeDepenses"); const selectAnneeRecettes = document.querySelector(".selectAnneeRecettes"); const graphDepenses = document.querySelector("#graphDepenses") const graphRecettes = document.querySelector("#graphique-recettes") selectAnneesDepenses.addEventListener("change", (e) => { let selectionAnnee = e.target.value; filtreAnneeDepenses(selectionAnnee); }); const filtreAnneeDepenses = (selectionAnnee) => { let formData = new FormData(); formData.append("selectionAnnee", selectionAnnee); for (let item of formData) { console.log(item[0], item[1]); } let colDepenses async function statsDepenses(colDepenses) { let response = await fetch("/admin/statistiques", { body: formData, method: "POST", cache: "no-cache", headers: { "X-Requested-With": "XMLHttpRequest" } }) colDepenses = await response.json(); }; statsDepenses() } // Obtenir dernier mois contenu dans le select et afficher les dépenses au démarrage de la page if (selectAnneesDepenses.value) { let selectionAnnee = selectAnneesDepenses[0].value; selectAnneesDepenses.value = selectionAnnee; filtreAnneeDepenses(selectionAnnee); } selectAnneesDepenses.addEventListener("change", (e) => { let selectionAnnee = e.target.value; filtreAnneeDepenses(selectionAnnee); }); // Graphique dépenses const afficherGraphique = (colDepenses) => { let graph = new Chart(graphDepenses, { type: "bar", data: { labels: [ "Janv", "Févr", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc", ], datasets: [ { label: "Dépenses pour l'année", data: colDepenses, backgroundColor: [ "red", "blue", "green", "red", "blue", "green", "red", "blue", "green", "red", "blue", "green", ], borderWidth: 1 }, ] } }) }; afficherGraphique() </script> {% endblock %}
Jean Sérien, il y a 2 ans

Bon, j'ai réussi à faire fonctionner le bazar :)

J'ai repris un fetch classique avec appel à fonction interne.

Il fallait faire un JSON.parse sur le tableau de data.
J'ai aussi mis en place un destroy() sur le graphique à chaque instance car cela bloquait ... Merci pour votre aide :)

Je partage ici le code pour qui en aurait besoin :

const selectAnneesDepenses = document.querySelector(".selectAnneesDepenses"); const graphDepenses = document.querySelector("#graphDepenses"); const filtreAnneeDepenses = (selectionAnnee) => { let formData = new FormData(); formData.append("selectionAnnee", selectionAnnee); for (let item of formData) { console.log(item[0], item[1]); } let colDepenses; fetch("/admin/graphique-depenses", { body: formData, method: "POST", cache: "no-cache", headers: { "X-Requested-With": "XMLHttpRequest", }, }) .then((response) => response.json()) .then((data) => { colDepenses = JSON.parse(data); afficherGraph() }); const afficherGraph=()=>{ let graph=Chart.getChart('graphDepenses') if(graph) graph.destroy() graph = new Chart(graphDepenses, { type: "bar", // options:{indexAxis:'y'}, data: { labels: [ "Janv", "Févr", "Mars", "Avr", "Mai", "Juin", "Juil", "Août", "Sept", "Oct", "Nov", "Déc", ], datasets: [ { label: "Dépenses pour l'année", data: colDepenses, backgroundColor: [ "red", "blue", "green", "red", "blue", "green", "red", "blue", "green", "red", "blue", "green", ], borderWidth: 1, }, ], }, }); } }; //Obtenir liste des dépenses après sélection de l'année selectAnneesDepenses.addEventListener("change", (e) => { let selectionAnnee = e.target.value; filtreAnneeDepenses(selectionAnnee); }); // Obtenir dernier mois contenu dans le select et afficher les dépenses au démarrage de la page if (selectAnneesDepenses.value) { let selectionAnnee = selectAnneesDepenses[0].value; selectAnneesDepenses.value = selectionAnnee; filtreAnneeDepenses(selectionAnnee); }