I’m learning the database of pouchDB. Very new at this. I can’t seem to get the correct syntax to display the DB contents. Can anyone look this over and give any pointers? There is no error output in Chrome Dev Tools console.
(function() {
'use strict';
// Create new DB
// var newTodoDom = document.getElementById('new-todo');
var tl = document.getElementById('todo-list');
var db = new PouchDB('todos');
// Insert data into DB
db.bulkDocs([
{
id: new Date().toISOString(),
title: 'Dog',
name: 'German Shepherd'
},
{
id: new Date().toISOString(),
title: 'Dog',
name: 'Rotweiler'
},
{
id: new Date().toISOString(),
title: 'Cat',
name: 'Siamese'
},
{
id: new Date().toISOString(),
title: 'Cat',
name: 'Persian'
}
], function(err, response) { });
// If something changes, update the screen?
db.changes({
since: 'now',
live: true
}).on('change', showTodos);
// 1. Grab data from the DB
function showTodos() {
db.allDocs({include_docs: true, descending: true}, function(err, doc) {
redrawTodosUI(doc.rows);
});
}
// 3. Display the DB contents
function createTodoListItem(todo) {
tl.innerHTML += '<p>' + todo.title + '<br>' + todo.name + '</p>';
}
// 2. Call the Display DB command
function redrawTodosUI(todos) {
tl.innerHTML = ''; // No content for tl
todos.forEach(function(todo) {
db.put(todo.id);
db.put(todo.title);
db.put(todo.name);
createTodoListItem();
});
}
});