How to populate jquery mobile listview from pouchdb data

Question

I'm developing simple mobile app using jquery mobile and pouchdb. I followed the tutorial through this link http://pouchdb.com/getting-started.html .

I'm trying to populate a Jquery Mobile listview retrieve from pouchdb data. For example name (David), each of this name will link to a new page that provided full information such as its email, age and etc.

I got stuck at this line

function redrawUi(mydb) {

Here is a source code. http://jsfiddle.net/Vanilla/p2u8wc5p/

Thanks in advance.

 var db = new PouchDB('mydb'); var remoteCouch = 'http://localhost:5984/mydb'; db.info(function(err, info) { db.changes({ since: info.update_seq, live: true }).on('change', showTodos); }); db.put({ _id: new Date().toISOString(), email: 'dave@gmail.com', name: 'David', }); db.changes().on('change', function() { console.log('Ch-Ch-Changes'); }); db.replicate.to('http://127.0.0.1:5984/mydb'); db.replicate.from('http://127.0.0.1:5984/mydb'); function showdetail() { db.allDocs({ include_docs: true, descending: true }).then(function(doc) { redrawUi(doc.rows); }). catch(function(err) { console.log(err); }); } function redrawUi(mydb) { }); } 

Answer 1

Assuming you are returned an array of objects with id, name and email. You would just iterate the array, create listitem markup and append it to the existing listview DOM element, eg:

function redrawUi(mydb) {
    var itemsHTML = '';
    for (var i=0; i<mydb.length; i++){
        itemsHTML += '<li>' + mydb[i].name + ' - ' + mydb[i].email + '</li>';
    }
    $("#list").empty().append(itemsHTML).listview("refresh");
}