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

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

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 %}

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