Souci d'utilisation de tableau json en variable globale

Bien le bonjour à vous et je demande votre indulgence si je ne suis pas clair, je suis nouveau sur ce forum et j'apprends la programmation html, css, php, mysql et javascript, ce dernier langage me donnant du fil à retordre.

Pour apprendre, je transforme à ma sauce et en local, un javascript de gestion de taches. Les infos sont données par les utilisateurs de la maison et complètent un tableau json qui est manipulé (ajout, modification d'état, modification d'intitulé, suppression) par différentes fonctions au sein de ce script (jusqu'ici, tout fonctionne bien).
Ce script était prévu pour une sauvegarde en "localstorage". Chose que j'ai modifié pour le faire dans un fichier spécifique par l'intermédiaire de PHP (Là aussi tout fonctionne).
Le souci arrive lors de la récupération de ces infos. J'arrive à les récupérer par la fonction fetch mais sorti de cette fonction, la manipulation du tableau ne fonctionne plus car je n'arrive pas à en faire une variable globale utilisable dans tout le script et donc hors de la fonction fetch.

Voici les codes:
-> le fichier save.json (sauvegarde du tableau)

[
  {
    "id":1783964309723,
    "text":"Changer ampoule du couloir",
    "state":"aFaire",
    "timestamp":"2026-07-13T17:38:29.723Z"
  },
  {
    "id":1783964465461,
    "text":"Sortir les poubelles mercredi soir",
    "state":"fait",
    "timestamp":"2026-07-13T17:41:05.461Z"
  },
  {
    "id":1783964580367,
    "text":"Ranger le garage,
    "state":"enCours",
    "timestamp":"2026-07-13T17:41:05.461Z"
  },
    ... 
]

-> Le fichier script.js (gestion du tableau json)

// Récupération du fichier json
fetch('save.json')
  .then(response => response.json())
  .then(todos => {
    console.log(todos);
  })

/* Ici j'aimerais pouvoir utiliser "todos" dans tout le script */

// Ajoute une tache dans la liste
function addTodo(){
  const input = document.getElementById("todoInput");
  const text = input.value.trim();
  if(text){
    const todo = {
      id: Date.now(),
      text: text,
      state: "aFaire",
      timestamp: new Date()
    };
    todos.push(todo); // ajoute la nouvelle tache au tableau todos
    saveTodos(); // sauvegarde du changement
    input.value = ""; 
    renderTodos(); // Rafraîchissement de la liste todos
  }
}

// Efface une tache de la liste
function deleteTodo(id){
  todos = todos.filter(todo => todo.id !== id); // efface toute l'info correspondant à cet id
  saveTodos(); // sauvegarde du changement
  renderTodos();  // Rafraîchissement de la liste todos
}

Dans toutes les fonctions du script je travaille sur la variable "todos" qui est le tableau json au sein du script. Et je n'arrive pas à comprendre comment affecter la variable "data" récupérée par "fetch" à la variable "todos" que j'utilise partout ailleurs en global.

Merci d'avance pour votre aide
Modifié par Revetoile (02 Aug 2026 - 17:21)