How to use condition like where Clause in indexdb for browsers

Question

I am using indexdb as it supports all browser. I have successfully added data and got data from indexdb but I want to use where clause condition. Like I have Product Name, Pathogen, Disease,Route so I want to get data where Product Name let's say is Ali and Disease is Skin. They way I have got from different sites what it does it show all the record with starting and end the value provided in the two input fields.

Here is my code which I am using.

     <!doctype html>
     <html>
     <head>
     </head>
     <body>
     <script>
     var db;

    function indexedDBOk() {
    return "indexedDB" in window;
    }

    document.addEventListener("DOMContentLoaded", function() {

    //No support? Go in the corner and pout.
    if(!indexedDBOk) return;

    var openRequest = indexedDB.open("products",1);
    //var openRequest = indexedDB.open("idarticle_people5",1);


    openRequest.onupgradeneeded = function(e) {
    var thisDB = e.target.result;

    if(!thisDB.objectStoreNames.contains("products")) {
        var os = thisDB.createObjectStore("products", {autoIncrement:true});
        //I want to get by name later
        os.createIndex("name", "name", {unique:false});
        //I want email to be unique
        os.createIndex("pathogen", "pathogen", {unique:false});
        os.createIndex("disease", "disease", {unique:false});
        os.createIndex("route", "route", {unique:false});
    }
    }

    openRequest.onsuccess = function(e) {
    db = e.target.result;

    //Listen for add clicks
    document.querySelector("#addButton").addEventListener("click", addPerson, false);

    //Listen for get clicks
    document.querySelector("#getButton").addEventListener("click", getPerson, false);

    }   

    openRequest.onerror = function(e) {
    //Do something for the error
    }


   },false);


 function addPerson(e) {
 var name = document.querySelector("#name").value;
 var pathogen = document.querySelector("#pathogen").value;
 var disease = document.querySelector("#disease").value;
 var route = document.querySelector("#route").value;


console.log("About to add "+name+"/"+pathogen);

//Get a transaction
//default for OS list is all, default for type is read
var transaction = db.transaction(["products"],"readwrite");
//Ask for the objectStore
var store = transaction.objectStore("products");

//Define a person
var person = {
    name:name,
    pathogen:pathogen,
    disease:disease,
    route:route
}

//Perform the add
var request = store.add(person);

request.onerror = function(e) {
    alert("Sorry, that email address already exists.");
    console.log("Error",e.target.error.name);
    console.dir(e.target);
    //some type of error handler
}

request.onsuccess = function(e) {
    console.log("Woot! Did it");
 }
 }

function getPerson(e) {

var name = document.querySelector("#nameSearch").value;

var endname = document.querySelector("#diseaseSearch").value;

if(name == "" && endname == "") return;

var transaction = db.transaction(["products"],"readonly");
var store = transaction.objectStore("products");
var index = store.index("name");





//Make the range depending on what type we are doing
var range;
if(name != "" && endname != "") {
    range = IDBKeyRange.bound(name, endname);
    } else if(name == "") {
    range = IDBKeyRange.upperBound(endname);
    }   else {
    range = IDBKeyRange.lowerBound(name);
    }
    var s = "";

  index.openCursor(range).onsuccess = function(e) {
    var cursor = e.target.result;
    if(cursor) {
        s += "<h2>Key "+cursor.key+"</h2><p>";
        for(var field in cursor.value) {
            s+= field+"="+cursor.value[field]+"<br/>";
        }
        s+="</p>";
        cursor.continue();
    }
    document.querySelector("#status").innerHTML = s;
    } 

    }


    </script>

    <input type="text" id="name" placeholder="Name"><br/>
    <input type="text" id="pathogen" placeholder="Pathogen"><br/>
    <input type="text" id="disease" placeholder="Disease"><br/>
    <input type="text" id="route" placeholder="Route"><br/>

    <button id="addButton">Add Data</button>

     <p/>

   <input type="text" id="nameSearch" placeholder="Name"><br/>
   <input type="text" id="diseaseSearch" placeholder="Disease"><br/>
   <button id="getButton">Get By Name</button>

   <p/>

  <div id="status"></div>


 </body>
 </html>

Answer 1

You can try the following procedure with three parameters:

databaseid
tableid - storage name
callback - function, which returns array of selected data
cond - conditional function. returns true for ok records, and false for others.

Here is the code:

function selectFromTable (databaseid, tableid, cb, cond) {
    var request = window.indexedDB.open(databaseid);
    request.onsuccess = function(event) {
        var res = [];
        var ixdb = event.target.result;
        var tx = ixdb.transaction([tableid]);
        var store = tx.objectStore(tableid);
        var cur = store.openCursor();
        cur.onblocked = function(event) {
    }
    cur.onerror = function(event) {
    }
    cur.onsuccess = function(event) {
        var cursor = event.target.result;
        if(cursor) {
            if(cond(cursor.value) ) res.push(cursor.value);
            cursor.continue();
        } else {
            ixdb.close();
            cb(res);
        }
    }
}

Answer 2

Try using a browser database API adapter and read about its usage from its wiki page . You need to include all 3 JS files to get started.

How to use condition like where Clause in indexdb for browsers

Question

2 answers

solution1
0 2015-05-18 11:10:09

solution2
0 2015-05-26 18:21:25

How to use condition like where Clause in indexdb for browsers

Question

2 answers

solution1 0 2015-05-18 11:10:09

solution2 0 2015-05-26 18:21:25

solution1
0 2015-05-18 11:10:09

solution2
0 2015-05-26 18:21:25