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

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 :

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
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);
}