Dexie.js itération d'une liste dynamique

Question

J'utilise dexie.js, qui est un wrapper indexDB. Anywhoo, j'ai un tableau qui est appelé à partir du stockage local de l'utilisateur, et ma fonction est censée parcourir tous les éléments de la liste dans la base de données et l'afficher. Cependant, en cliquant sur mon Butane il montre seulement la plus récente entrée de nom.

Remarque: Vous pouvez afficher la totalité de la base de données en ajoutant quelques valeurs et en vérifiant votre stockage local.

Mon jsFiddle: https://jsfiddle.net/enzp3zws/1/

mon html:

<ul id="mane"></ul> 

mes js:

var db = new Dexie("TestDatabase"); 
db.version(1).stores({ 
    friends: '++id, name, age' 
}); 
var collection = db.friends; 
var placement = document.getElementById('rainman'); 
var jacement = document.getElementById('rainboy'); 
var stacement = document.getElementById('mane'); 
var listed = document.createElement('li'); 

function addrain(){ 
    collection.each(function(friend){ 
    var element = [friend.name]; 
    for (var i = 0; i < element.length; i++){ 
    listed.textContent = element[i]; 
    document.getElementById('mane').appendChild(listed); 
    //alert(element); <-- this call alerts all names in database. 
    } 
}); 
} 

S'il vous plaît excuser le caractère aléatoire de certains de ces noms de variables. Je ne sais plus ce qu'est le sommeil.

Answer 1

Vous devez créer un nouvel élément « li » à chaque fois:

//Remove var listed = ... line in header, then: 
function addrain(){ 
    collection.each(function(friend){ 
     var element = [friend.name]; 
     for (var i = 0; i < element.length; i++){ 
      var listed = document.createElement('li'); 
      listed.textContent = element[i]; 
      document.getElementById('mane').appendChild(listed); 
     } 
     //alert(element); <-- this call alerts all names in database. 
    }); 
} 

La raison pour laquelle votre code ne fonctionne pas avant que vous ne créé un élément li, et a changé à plusieurs reprises son texte et réinséré à différents endroits.