I am trying to make a simple login system using PouchDB, but I have a problem when I want to call db.get() in my function logIn()
var submit = $("input[name='submit']");
function logIn() {
var username = $("input[name='username']").value;
var password = $("input[name='password']").value;
db.get(table.users, (err, info) => { // <-- Pouch db get() function to get data
if (!err) {
var data = ("db value", info);
for (i = 0; i < 2; i++) {
if (username == data[i].name && password == data[i].pass) {
console.log(username + " is logged in!");
return;
}
}
console.log("Incorrect data!");
} else {
console.log("err field", err);
}
});
db.get(); // <-- Here I call get() function
}
submit.click(() => {
logIn(); // <-- On click call login() function
});
In the console I get
Uncaught (in promise) TypeError: cb is not a function
is there a better option for this?
Advertisement
Answer
The error
Uncaught (in promise) TypeError: cb is not a function
Is thrown in db.get() because the code is calling the get method without a callback parameter (no parameters in fact).
The logIn method is calling db.get twice, first here
db.get(table.users, (err, info) => { // <-- Pouch db get() function to get data
...
});
and then here
db.get(); // <-- Here I call get() function
The second call fails immediately. It appears the thinking is db.get(table.users,(err,info) => is defining db.get but it’s not, it’s an actual call.
The snippet below demonstrates db.get with callback. I left an async/await example in there. See the pouchDB documentation for get
const g_result = 'result';
const gel = id => document.getElementById(id);
let db;
function logIn(userName, password) {
const view = gel(g_result);
// get the Users doc using get
db.get("Users", (err, doc) => {
if (err) {
view.innerText = JSON.stringify(err, undefined, 3);
} else {
let info = doc.data.find(e => e.name === userName && e.pass === password);
if (info) {
view.innerText = `👍 Welcome ${userName}!`;
} else {
view.innerText = `👎 Log in failed, try again.`;
}
}
});
}
async function logInAwait(userName, password) {
const view = gel(g_result);
let text = "";
try {
let doc = await db.get("Users");
let info = doc.data.find(e => e.name === userName && e.pass === password);
if (info) {
text = `👍 Welcome ${userName}!`;
} else {
text = `👎 Log in failed, try again.`;
}
} catch (err) {
text = JSON.stringify(err, undefined, 3);
} finally {
view.innerText = text;
}
}
// canned documents
function getDocsToInstall() {
return [{
_id: "Users",
data: [{
name: "Jerry",
pass: "Garcia"
},
{
name: "Bob",
pass: "Weir"
},
{
name: "Wavy",
pass: "Gravy"
},
]
}];
}
// init example db instance
async function initDb() {
db = new PouchDB('test', {
adapter: 'memory'
});
await db.bulkDocs(getDocsToInstall());
};
(async() => {
await initDb();
gel("form").style = "";
})();<script src="https://github.com/pouchdb/pouchdb/releases/download/7.1.1/pouchdb-7.1.1.min.js"></script>
<script src="https://github.com/pouchdb/pouchdb/releases/download/7.1.1/pouchdb.memory.min.js"></script>
<pre id="form" style="display: none">
<label for="user">User Name</label>
<input id="user" />
<label for="pass">Password</label>
<input id="pass" /> <br/>
<button onclick="logIn(gel('user').value,gel('pass').value)">Log In (callback)</button> <button onclick="logInAwait(gel('user').value,gel('pass').value)">Log In (async)</button>
</pre>
<hr/>
<pre id='result'></pre>