Angular-indexedDB: Crafting personalized queries

Question

Angular-indexedDB: Crafting personalized queries

I've integrated the bramski/angular-indexedDB library into my application. The basic CRUD operations are running smoothly, but I'm encountering some issues with custom queries not functioning as intended. I have set up the code below:

 angular.module('myModuleName', ['indexedDB'])
      .config(function ($indexedDBProvider) {
        $indexedDBProvider
          .connection('myIndexedDB')
          .upgradeDatabase(1, function(event, db, tx){
            var objStore = db.createObjectStore('people', {keyPath: 'ssn'});
            objStore.createIndex('name_idx', 'age', {unique: false});
            objStore.createIndex('name_idx, age_idx', ['name', 'age'] , {unique: false});
    });

The basic query operations are functioning as shown below

$indexedDB.openStore('people', function(x){
   var find = x.query();
   find = find.$eq('John');
   find = find.$index("name_idx");    
   x.eachWhere(find).then(function(e){
      $scope.list= e;
   });
});

which executes the following query.

select * from people where name='John'

However, in the mentioned scenario, how can we execute custom queries like

select * from people where name='John' and age='25';
delete from people where name='John' and age='25';

angularjs indexeddb

Answer 1

Answer №1

The current library being utilized lacks the capability for complex queries, but a solution can be implemented using pure JavaScript, such as this example:

To begin, define your index as follows:

objStore.createIndex('name_age_idx', ['name', 'age'] , {unique: false});

Next, create a search query that retrieves values matching the search criteria.

searchIndexedDB = function (name, age, callback) {
  var request = indexedDB.open(dbName);
  request.onsuccess = function(e) {
    var db = e.target.result;
    var trans = db.transaction(objectStoreName, 'readonly');
    var store = trans.objectStore(objectStoreName);
    var index = store.index('name_age_idx');
    var keyRange = IDBKeyRange.only([name, age]);
    
    var openCursorRequest = index.openCursor(keyRange);

    openCursorRequest.onsuccess = function(e) {
        let result = e.target.result;
        
        if(result){
            callback(result.value); 
            result.continue(); 
        }
    };

    trans.oncomplete = function(e) {
        db.close();
    };

    openCursorRequest.onerror = function(e) {
        console.log("Error Getting: ", e);
    };
  };
  request.onerror = myStorage.indexedDB.onerror;
}

If looking for a range between two indices, adjust the keyrange parameter to:

var keyRange = IDBKeyRange.bound([name,fromAge], [value, toAge]);

Answer 2

The current library being utilized lacks the capability for complex queries, but a solution can be implemented using pure JavaScript, such as this example:

To begin, define your index as follows:

objStore.createIndex('name_age_idx', ['name', 'age'] , {unique: false});

Next, create a search query that retrieves values matching the search criteria.

searchIndexedDB = function (name, age, callback) {
  var request = indexedDB.open(dbName);
  request.onsuccess = function(e) {
    var db = e.target.result;
    var trans = db.transaction(objectStoreName, 'readonly');
    var store = trans.objectStore(objectStoreName);
    var index = store.index('name_age_idx');
    var keyRange = IDBKeyRange.only([name, age]);
    
    var openCursorRequest = index.openCursor(keyRange);

    openCursorRequest.onsuccess = function(e) {
        let result = e.target.result;
        
        if(result){
            callback(result.value); 
            result.continue(); 
        }
    };

    trans.oncomplete = function(e) {
        db.close();
    };

    openCursorRequest.onerror = function(e) {
        console.log("Error Getting: ", e);
    };
  };
  request.onerror = myStorage.indexedDB.onerror;
}

If looking for a range between two indices, adjust the keyrange parameter to:

var keyRange = IDBKeyRange.bound([name,fromAge], [value, toAge]);

Angular-indexedDB: Crafting personalized queries

Answer №1

Similar questions

Tips for loading a partial view page in a specific element using Angular JS after clicking a button

Is there a way to insert rows and columns into the table headers using React Material UI?

Having difficulty removing new or existing lines on StackBlitz