Dexie.js iterating a dynamic list

Question

I am using dexie.js, which is an indexDB wrapper. Anywhoo, I have an array that is called from the user's local storage, and my function is supposed to iterate through every list item in the DB and show it. However, upon clicking on my Butane it only shows the most recent input of name.

Note: You can see the entire database by adding a few values in and checking your local storage.

My JsFiddle: https://jsfiddle.net/enzp3zws/1/

my html:

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

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

Please excuse the randomness of some of these variable names. I don't know what sleep is anymore.

Answer 1

You need to create a new 'li' element each time:

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

The reason your code did not work before is that you only created one li element, and repeatedly changed its text and re-inserted it at different locations.