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

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
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>