I am new at using inxededdb and am trying to get data out of a store. The store contains data, but for some reason the code stops after trying to set the var tx. If I am missing anything please let me know. Here is the function with which I am trying to get the book:
function getBook(){
var tx = db.transaction("book", "readonly");
var store = tx.objectStore("book");
var index = store.index("by_getid");
var request = index.get("<?php echo $_GET['book'] ?>");
request.onsuccess = function() {
var matching = request.result;
if (matching !== undefined) {
document.getElementById("text-container").innerHTML = matching.text;
} else {
alert('no match');
report(null);
}
};
}
Solved Version:
function getBook(){
var db;
var request = indexedDB.open("library", 1);
request.onsuccess = function (evt) {
db = request.result;
var transaction = db.transaction(["book"]);
var objectStore = transaction.objectStore("book");
var requesttrans = objectStore.get(<?php echo $_GET['book'] ?>);
requesttrans.onerror = function(event) {
};
requesttrans.onsuccess = function(event) {
alert(requesttrans.result.text);
};
};
}
The problem is probably your db variable. You are probably accessing a closed or null instance of a connection object.
Try instead to create the db connection right inside the function. Do NOT use a global db variable.
index.get yields primary key. You have to get record value using the resulting primary key.
I has problem with transaction, it's return error db.transaction is not a function or return undefined.
You will try like this, it's working for me:
const table = transaction.objectStore('list');
const query = table.getAll();
query.onsuccess = () => {
const list = query?.result;
console.log(list);
};
Related
I know this questions has been asked several times . But I have not been able to find out the solution after getting error multiple times . this is the code of my indexed db
request.onupgradeneeded = function(event) {
var db = event.target.result;
var upgradeTransaction = event.target.transaction;
var objectStore = db.createObjectStore("todostore", {keyPath: "timestamp"});
UserFunction();
};
function UserFunction(){
var ObjectStore = db.transaction("todostore").objectStore("todostore");
var index = ObjectStore.createIndex("ixName", "fieldName");
}
Failed to execute 'createIndex' on 'IDBObjectStore': The database is not running a version change transaction.
I am calling this function of button click I want to add index with value when a button is clicked
<button onclick="UserFunction()">createIndex</button>
You can only change the schema of the database during a version upgrade. Something like this is plausible:
function OnClick() {
// assumes db is a previously opened connection
var oldVersion = db.version;
db.close();
// force an upgrade to a higher version
var open = indexedDB.open(db.name, oldVersion + 1);
open.onupgradeneeded = function() {
var tx = open.transaction;
// grab a reference to the existing object store
var objectStore = tx.objectStore('todostore');
// create the index
var index = objectStore.createIndex('ixName', 'fieldName');
};
open.onsuccess = function() {
// store the new connection for future use
db = open.result;
};
}
Code in UserFunction() call, is starting a new transaction, while already a transaction is going on in "upgradeneeded" listener.
So new transaction should be started, after objectStore.transaction completes.
Here is the JSFiddle : Solution is here
function UserFunction(){
var request = window.indexedDB.open("MyTestDatabase", 3);
request.onupgradeneeded = function(event) {
var db = event.target.result;
var upgradeTransaction = event.target.transaction;
var objectStore = db.createObjectStore("todostore", {keyPath: "timestamp"});
objectStore.transaction.oncomplete = function(event) {
addIndex(db);
};
};
}
function addIndex(db){
var ObjectStore = db.transaction("todostore").objectStore("todostore");
var index = ObjectStore.createIndex("ixName", "fieldName");
}
I am creating an indexeddb, and have several stores in it.
Have some data that has to be initially added when stores are created.
I have function where I create database and stores:
function db_init(){
var request = indexedDB.open("db", "1.0");
request.onupgradeneeded = function(){
var db = request.result;
//store 1
db.createObjectStore("store1", {keypath: "id", autoIncrement: true});
//add initial datas;
//store2
db.createObjectStore("store2", {keypath: "id", autoIncrement: true});
//...
//store 3
// init necessary databases
db_populate();
}
request.onsuccess = function (){
db = request.result;
populate:db();
}
}
And inside db_populate function have 4 other functions where I am populating datastores:
function db_populate() {
init_store1();
init_store2();
//...
console.log("db populated with data");
}
Each init_score populates stores with transactions like below:
var tx = db.transaction("store1", "readwrite");
var store = tx.objectStore("store1");
Now, I have a problem. Every time I open or refresh the page, the initial data are duplicated. There are added over again.
When I add db_populate at the end of onupgradeneeded function, I get an error:
Uncaught TypeError: Cannot read property 'transaction' of undefined
on line:
var tx = db.transaction ("store1", "readwrite");
What I am trying to achieve is to create data stores with its initial data once and that is it.
Any idea what I am doing wrong?
Thanks in advance.
That's due to the fact that you can't insert data during a upgrade needed event. What you need to do instead is close the connection after the upgrade and reopen it again for the data insert.
The flow should be something like this:
function db_init() {
var request = indexedDB.open("db");
var dbShouldInit = false;
request.onupgradeneeded = function(e) {
var db = e.target.result;
dbShouldInit = true;
//store 1
db.createObjectStore("store1", {
keypath: "id",
autoIncrement: true
});
//add initial datas;
//store2
db.createObjectStore("store2", {
keypath: "id",
autoIncrement: true
});
}
request.onsuccess = function(e) {
e.target.result.close();
if(dbShouldInit)//executes only if DB init happened
db_populate(); //close the db first and then call init
}
}
function db_populate() {
init_store1(init_store2); //pass init 2 as callback
}
function init_store1(callback) {
var request = indexedDB.open("db");
request.onsuccess = function(e) {
var db = e.target.result;
var tx = db.transaction("store1", "readwrite");
var store = tx.objectStore("store1");
//init code here
tx.oncomplete = function(e) {
callback(); //here call the init for second function
};
}
}
function init_store2() {
var request = indexedDB.open("db");
request.onsuccess = function(e) {
var db = e.target.result;
var tx = db.transaction("store2", "readwrite");
var store = tx.objectStore("store2");
//init code here
tx.oncomplete = function(e) {
//here the app can continue
};
}
}
(function () {
//indexedDB.deleteDatabase("store");
var openDB = indexedDB.open("store", 1);
openDB.onupgradeneeded = function () {
var db = openDB.result;
var store;
if (!db.objectStoreNames.contains("example")) {
store = db.createObjectStore("example", {keyPath: "some"});
store.put({some: "initData"});
}
};
openDB.onsuccess = function (e) {
var db = e.target.result;
var rqst = db.transaction("example", "readonly")
.objectStore("example")
.get("initData");
rqst.onsuccess = function (e) {
console.log(rqst.result);
};
};
})();
req = db.openCursor();
req.customerData=new Array() //[{a:1}]
req.onsuccess = function(e) {
var cursor = e.currentTarget.result;
if (cursor) {
//console.log(cursor.value);
e.currentTarget.customerData.push(cursor.value);
e.currentTarget.customerData.push("hello?");
cursor.continue()
}
else {
console.log(e.currentTarget.customerData) //this always correct
}
}
console.log(req.customerData); //outside the onsuccess everything is gone?
console.log(req);
I can see customerData when I open the object in the chrome console
console.log(req.customerData);
But when I do the above it is empty?
replacing new Array() with [{a:1}]
console.log(req.customerData);
I can see a and also the other objects
but then agian
console.log(req.customerData[0].a);
works and the other objects are gone.
How can I save customerData? I tried just pushing numbers or text but same thing after transaction is done. I can't get the data out only display it on console.log() during the transaction?
I know it must be something past by reference but every variable I trow in dissapears?
Added full example below just type write() and read() in console
<script>
var iDB
ready=function(){
var request = indexedDB.open("my-database",1);
request.onupgradeneeded = function(e) {
var db = e.currentTarget.result
var store = db.createObjectStore("store", {keyPath: "muts", autoIncrement:false})
//store.createIndex("by_submit", "submit", {unique: false})
console.log('db upgrade', 'v'+db.version)
}
request.onerror = function(e) {
//var db = e.currentTarget.result;
//db.close()
console.error('db error ',e)
}
request.onsuccess = function(e) {
var db = e.currentTarget.result
db.onversionchange = function(e) {
db.close()
console.log('db changed', 'v'+db.version, 'CLOSED')
}
console.log('db setup', 'v'+db.version, 'OK')
}
iDB=request
}
drop=function(){
iDB.result.close()
var req = indexedDB.deleteDatabase(this.iDB.result.name);
req.onsuccess = function() {console.log("Deleted database successfully")}
req.onerror = function() {console.log("Couldn't delete database")}
req.onblocked = function() {console.log("Couldn't delete database due to the operation being blocked")}
}
read=function(){
var db=iDB
.result
.transaction(["store"], "readwrite").objectStore("store");
var req = db.openCursor();
req.iData=new Array();
req.onsuccess = function(e) {
var cursor = e.currentTarget.result;
if (cursor) {
e.currentTarget.iData.push(cursor.value);
e.currentTarget.iData.push("hello");
cursor.continue()
}
else {
console.log(e.currentTarget.iData)
}
}
console.log(req.iData)
}
write=function(){
var db=document.querySelector('my\-database')
.iDB
.result
.transaction(["store"], "readwrite").objectStore("store");
var customerData = [
{muts: "Bill", qty: "1"},
{muts: "Donna", qty: "1"}
]
for (var i in customerData){db.put(customerData[i])}
}
ready()
</script>
A few things
I recommend not setting custom properties of an IDBRequest object. Create and access objects that are in an outer scope instead.
There is no need to use event.currentTarget. event.target is sufficient (and so is 'this', and so is the request object itself).
onversionchange is deprecated.
Due to the asynchronous nature of indexedDB, you may be trying to print something out to the console that does not yet exist, or no longer exists. Instead, try printing something out when the transaction completes.
For example:
function populateArray(openDatabaseHandle, onCompleteCallbackFunction) {
var transaction = openDatabaseHandle.transaction('store');
var store = transaction.objectStore('store');
var myArray = [];
var request = store.openCursor();
request.onsuccess = function() {
var cursor = this.result;
if(!cursor) return;
myArray.push(cursor.value);
cursor.continue();
};
transaction.oncomplete = function() {
onCompleteCallbackFunction(myArray);
};
}
// An example of calling the above function
var conn = indexedDB.open(...);
conn.onsuccess = function() {
populateArray(this.result, onPopulated);
};
// An example of a callback function that can be passed to
// the populateArray function above
function onPopulated(data) {
console.debug(data);
data.forEach(function(obj) {
console.debug('Object: %o', obj);
});
}
//geoSpacialRepository.js
var geoSpatialRepository = {};
var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/repository');
var Schema = mongoose.Schema;
var LocationSchema = new Schema({
type: String,
coordinates: [Number,Number]
});
var Location = mongoose.model('locations', LocationSchema);
var db = mongoose.connection;
geoSpatialRepository.find = function(){
var query = Location.find({}, function(error, data){});
query.exec(function(err, data){
console.log("DATA ************************** ");
console.log (JSON.stringify(data));
});
}
exports.geoSpatialRepository = geoSpatialRepository;
The place where I have written console.log -> I want that variable data out of this callback as I will call this function geoSpatialRepository.find() outside this context (for instance n my test case).
//TestFile geoSpacilaRepository.spec.js
var assert = require("assert");
var locationsRepository = require("../geoSpatialRepository.js").geoSpatialRepository;
var chai = require("chai"),
should = chai.should(),
expect = chai.expect,
assert = chai.assert;
describe("finding locations from the database", function(){
//setup
var data = {
"type":"point",
"coordinates":[20,20]
};
before(function(){
locationsRepository.save(data);
});
it("should find the data present in location repository",function(){
//call
var actual = locationsRepository.find();
//assertion
console.log("ACTUAL ********************"+(JSON.stringify(actual)))
expect(actual).deep.equals(data);
});
});
You might have to redesign the find like this
geoSpatialRepository.find = function(callBackFunction) {
Location.find({}).exec(callBackFunction);
}
And then you need to invoke it, from the test case, like this
it("should find the data present in location repository", function() {
//call
locationsRepository.find(function(error, data) {
console.log("ACTUAL ********************" + (JSON.stringify(actual)))
//assertion
expect(actual).deep.equals(data);
});
});
Now, the function you pass as a parameter to find will get the actual data. You can compare the data and actual in that function.
I am using the following code to read data from Indexed DB and save it in variable allDownloadContent
ereaderdownload.indexedDB.getAllTodoItems = function() {
/*var todos = document.getElementById("todoItems");
todos.innerHTML = "";
*/
var db = ereaderdownload.indexedDB.db;
var trans = db.transaction(["downloadcontent"], "readwrite");
var store = trans.objectStore("downloadcontent");
var request = store.get(0);
request.onsuccess = function(e) {
console.log(e.target.result);
};
// Get everything in the store;
var cursorRequest = store.openCursor();
cursorRequest.onsuccess = function(e) {
var result = e.target.result;
if(!!result == false)
return;
allDownloadContent.push(result);
result.continue();
};
alert("content "+allDownloadContent[0]);
cursorRequest.onerror = ereaderdownload.indexedDB.onerror;
};
When I call the getAllTodoItems method from another Javascript file I am getting a alert message content undefined
since the cursorRequest.onsuccess method executes async I am getting undefined.
I cannot make use of web workers since it is not supported in chrome.
I tried promise in Jquery. Still I am getting the same alert message.
Please help me in resolving the issue.
As for now all browsers only support the Indexed-db ASync API, and what you need to do is add an event listener to the transaction oncomplete event. This event will fire when cursor is closed. From there you can return to your code:
trans.oncomplete = function (event) {
console.log('transaction completed');
yourFunction();
};