Discussion :

[benoit68]

Bonjour,

Je m’initie à IndexedDB :
Mozilla Firefox 68.2.0esr

J’aimerais séparer le code d’affichage du résultat d’une requête sur la db (ex : fonctions insérant des balises HTML avec la valeur du résultat d’une requête) et le code gérant ’accès à la base de données, de préférence dans des fichiers.js séparés.

Mais je ne parviens pas à écrire un code propre et structuré accédant à la db et retournant un tableau contenant le résultat.

Comme le code de la requête est toujours dans une fonction anonyme déclenché par l’évènement ".onsuccess", elle ne peut rien retourner.

En sortie de la fonction anonyme déclenchée par ".onsuccess", le tableau est vide, voici le

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
 function recupererToutesLesNotes(db) {
  var tablDeNotes = [];
  let dbReq = getObjRequ(db);
  dbReq.onsuccess = function(event) {
    let curseur = event.target.result;
    if (curseur != null) {
      tablDeNotes.push(curseur.value);
      console.log("Note récupérée : " + curseur.value.text);
      curseur.continue();
    } else {
      console.log("TablDeNotes dans onsuccess: " + tablDeNotes.length);
      // Si pas de meilleur solution, appeler ici la fct d’affichage… 
    }
  };
  dbReq.onerror = function(event) {
    console.log("Erreur dans la fct  " + event.target.errorCode);
  };
  // Ici je voudrais retourner tablDeNotes, mais il est vide
  console.log("TablDeNotes hors onsuccess: " + tablDeNotes.length);
}

Voici les log :

C'est connecté testArray.js:21:11
TablDeNotes hors onsuccess: 0 testArray.js:49:11
Note récupérée : note 1 testArray.js:39:15
Note récupérée : Une note testArray.js:39:15
TablDeNotes dans onsuccess: 2 testArray.js:42:15

Je suppose que la solution tutorielle présentée sur MDN est à des fins pédagogiques et n’est pas destinée à être utilisée tel quel, vu qu’elle mélange le code d’itération sur le curseur de la db et le code manipulant la page HTML (ce que je cherche à éviter).

Une autre solution trouvée sur le net, serait d’appeler la fonction d’affichage (manipulant les balise html de la page web) dans la fct anonyme (Ligne 12 du premier code) et lui passer le tableau de résultat…

Mais il y a encore une imbrication ne permettant pas une nette séparation (HTML/fonction de la db).

Appel de la fct recupererToutesLesNotes(db):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
// Déclaration des variables
let db;
let dbDelete = false;
 
// Création de 'maBaseDeDonnes'
let dbRequest = indexedDB.open("maBaseDeDonnees");
 
dbRequest.onsuccess = function(event) {
  db = event.target.result;
  console.log("C'est connecté");
  recupererToutesLesNotes(db);
};

Merci d'avance pour votre aide.
--
Benoit

Ps.
Si la formulation de ma question repose sur compréhension erronée du JavaScript, merci d’avance de m’éclairer.

[NoSmoking]

Bonjour,

En sortie de la fonction anonyme déclenchée par ".onsuccess", le tableau est vide, voici le

la fonction mise sur le onsuccess est asynchrone, donc le résultat n'est pas encore disponible quand tu fais un console.log.

Une autre solution trouvée (...) et lui passer le tableau de résultat…

c'est effectivement ce qui ce fait, on appelle cela « une fonction callback ».