[Résolu] 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 (03 Aug 2026 - 22:47)

Bonjour Revetoile et bienvenue sur ce forum !

Pour reformuler un peu ton problème : Tu utilises une variable globale qui contient un tableau de tes todos. Au chargement de la page, tu souhaites envoyer une requête pour charger le fichier "save.json", le parser et le stocker dans ta variable globale.
Avec le code que tu as envoyé, tu y es presque.

Voici une manière de faire (j'ai pris la liberté de te suggérer une optimisation supplémentaire) :

// On initialise notre variable globale
let todos = []

// Au chargement de la page, on effectue notre requête
// Le fait d'utiliser un événement permet d'exécuter la requête à un
// moment plus opportun qu'au chargement du script
window.addEventListener('load', function() {
    // On récupère le contenu du fichier JSON
    fetch('save.json')
        // On parse ce JSON pour en obtenir un tableau JS
        .then(response => response.json())
        // On affecte le tableau parsé à la variable globale
        .then(parsedResponse => todos = parsedResponse)
}

// ...

GuillaumeBauer a écrit :
Bonjour Revetoile et bienvenue sur ce forum !

Bonjour GuillaumeBauer, déjà merci pour ton accueil et pour ta réponse qui m'a beaucoup aidé.

GuillaumeBauer a écrit :
Pour reformuler un peu ton problème : Tu utilises une variable globale qui contient un tableau de tes todos. Au chargement de la page, tu souhaites envoyer une requête pour charger le fichier "save.json", le parser et le stocker dans ta variable globale.
Avec le code que tu as envoyé, tu y es presque.

Oui, oui, c'était bien ça l'idée mais mieux formulée que je ne l'ai fait.

GuillaumeBauer a écrit :
Voici une manière de faire (j'ai pris la liberté de te suggérer une optimisation supplémentaire) :

// On initialise notre variable globale
let todos = []

// Au chargement de la page, on effectue notre requête
// Le fait d'utiliser un événement permet d'exécuter la requête à un
// moment plus opportun qu'au chargement du script
window.addEventListener('load', function() {
    // On récupère le contenu du fichier JSON
    fetch('save.json')
        // On parse ce JSON pour en obtenir un tableau JS
        .then(response => response.json())
        // On affecte le tableau parsé à la variable globale
        .then(parsedResponse => todos = parsedResponse)
}

// ...

Merci aussi pour la suggestion, pour l'instant, je ne comprends pas trop le principe mais j'y réfléchirai plus tard.
J'ai recopié ton code tel quel, en rajoutant une fin de parenthèse ")" après la fin d'accolade "}"
Et adapté l'affichage du tableau qui ne se faisait pas au chargement de la page mais qui apparaissait si on ajoutait une tâche. Il a juste fallu ajouter une ligne spécifique utilisant la fonction d'affichage prévue à cet effet.

Voici ce que ça donne au final (au passage, merci aussi pour m'avoir permis de comprendre comment coloriser le code envoyé)

window.addEventListener('load', function() {
   fetch('save.json') // On récupère le contenu du fichier JSON
  .then(response => response.json()) // On parse ce JSON pour en obtenir un tableau JS
  .then(parsedResponse => todos = parsedResponse) // On affecte le tableau parsé à la variable globale
  .then(todos => renderTodos()) // On affiche le tableau récupéré dès le chargement de la page
})

Je précise que d'habitude, j'essaye de me débrouiller seul en fouillant Internet, mais là, j'avais vraiment besoin d'aide. Javascript reste toujours très mystérieux pour moi.
Donc pour finir, tout fonctionne à merveille grâce à toi. Il ne me reste plus qu'à comprendre mieux le fonctionnement du script.
Je vais laisser un peu de temps pour une éventuelle réponse de ta part et je pourrai marqué le sujet comme "résolu"
Modifié par Revetoile (03 Aug 2026 - 19:28)

Revetoile a écrit :

J'ai recopié ton code tel quel, en rajoutant une fin de parenthèse ")" après la fin d'accolade "}"
Et adapté l'affichage du tableau qui ne se faisait pas au chargement de la page mais qui apparaissait si on ajoutait une tâche. Il a juste fallu ajouter une ligne spécifique utilisant la fonction d'affichage prévue à cet effet.

Bien vu ! C'est ça de rédiger une réponse à l'arrache dans le train

Je te conseille de consulter la documentation du Mozilla Developper Network qui est très bien faite, compréhensible et traduite en français. par exemple :
https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Events
https://developer.mozilla.org/fr/docs/Learn_web_development/Extensions/Async_JS
https://developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

Tu trouveras aussi ici une section référençant un certain nombre de livres très bons : https://www.alsacreations.com/livres/

Au plaisir de te relire sur ce forum

GuillaumeBauer a écrit :

Bien vu ! C'est ça de rédiger une réponse à l'arrache dans le train

Et bien ta réponse à l'arrache m'a beaucoup aidé à faire tourner ce script correctement...
Et je vais aller consulter les liens que tu m'as généreusement donné pour essayer d'avancer dans ma compréhension de javascript

Merci encore à toi. Je marque le sujet comme résolu