Discussion :

[clickandgo]

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>

[clickandgo]

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 :

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