Javascript: How to update IndexedDB? - javascript

I'm trying to create a chrome extension, but I am having some trouble updating my DB.
In the code below I am using index.get to the the object that contains a certain value. If such an object doesn't exist I will create a new one, which works just fine.
But if the DB contains an object with the specified value, I want to append a new object to an array (allMessages) that is inside the object I searched for. The details doesn't really matter in this case.
What is important is to find out if the way I'm adding this new obj to the array (allMessages) is a valid way of updating the database.
records.forEach((person) => {
console.log("here1");
const index = objectStore.index("urlKeyValue");
let search = index.get(person.urlKeyValue);
search.onsuccess = function (event) {
if (search.result === undefined) {
// no record with that key
let request = objectStore.add(person);
request.onsuccess = function () {
console.log("Added: ", person);
};
} else {
// here I'm iterating an array that is inside the obj I searched for,
// and then checking if the key for that array matches **theUserId**
for (userObj of event.target.result.allMessages) {
if (theUserId == Object.keys(userObj)) {
// is this part correct. Is it possible to update the DB this way?
let objToAdd1 = {
time: person.allMessages[0][theUserId][0].time,
msg: person.allMessages[0][theUserId][0].msg,
};
let currentObj = userObj[theUserId];
let updatedObj = currentObj.push(objToAdd1);
}
}
)}

Using objectStore.openCursor you can update only part of the record.
The following updates only book prices.
const transaction = db.transaction("books", "readwrite");
const objectStore = transaction.objectStore("books");
records = [{ id: "kimetu", price: 600 }];
records.forEach((book) => {
const index = objectStore.index("id");
const search = index.get(book.id);
search.onsuccess = () => {
if (search.result === undefined) {
const request = objectStore.add(book);
request.onsuccess = () => {
console.log("Added: ", book);
};
} else {
const request = objectStore.openCursor(IDBKeyRange.only(book.id));
request.onsuccess = () => {
const cursor = request.result;
if (cursor) {
cursor.value.price = 1000;
const updateRequest = cursor.update(cursor.value);
updateRequest.onsuccess = () => {
console.log("Updated: ", cursor.value.price);
};
cursor.continue();
}
};
}
}
});

Related

Undefined array elements in my automated javascript/chai tests

I am using chai and javascript to run some automated tests against API endpoints.
In one of my tests, I am pushing results into an array (shown below, the array is named acceptanceCriteriaHashes).
If I put a breakpoint in the before code then I can see the array, and all the elements within the array, are fully populated with the object returned from the db call.
However when I actually come to verify the contents of the array later in the test, the array, although it has the correct number of elements, contains only undefined?
Have tried to push directly with the results of the db call and that doesn't work either?
const getAcceptanceCriteria = (testCase) => {
let getAcceptanceCriteriaResponse;
let myLicenceChecksPassed = false;
const acceptanceCriteriaHashes = new Array();
describeTest(`${testCase.testCaseId} - ${testCase.testDescription}`, async () => {
before(async () => {
if (testCase.myLicenceChecksPassed !== undefined) {
myLicenceChecksPassed = testCase.myLicenceChecksPassed;
}
getAcceptanceCriteriaResponse = await getAcceptanceCriteriaAPICall(testCase.productId, testCase.assetType, testCase.underwriter, myLicenceChecksPassed);
if (getAcceptanceCriteriaResponse != undefined && getAcceptanceCriteriaResponse.body.Detail.length > 0) {
for (let i = 0; i < getAcceptanceCriteriaResponse.body.Detail.length; i++) {
// eslint-disable-next-line prefer-const
let response = await readAcceptanceCriteriaHashes(getAcceptanceCriteriaResponse.body.Detail[i].ContentHash);
if (response != undefined) {
let record = { Hash: response.Hash, Criteria: response.Criteria };
acceptanceCriteriaHashes.push(record);
}
}
console.log(acceptanceCriteriaHashes);
}
});
// other tests successfully run here
it(`${testCase.testCaseId} - Record for contentHash exists in the AcceptanceCriteriaHashes table`, async () => {
expect(acceptanceCriteriaHashes).to.not.be.empty;
expect(getAcceptanceCriteriaResponse.body.Detail.length).to.eql(acceptanceCriteriaHashes.length);
for (let i = 0; i < acceptanceCriteriaHashes.length; i++) {
expect(acceptanceCriteriaHashes[i].to.not.be('undefined', `Returned undefined for ContentHash: ${getAcceptanceCriteriaResponse.body.Detail[i].ContentHash}`));
expect(acceptanceCriteriaHashes[i].Criteria.to.not.be.empty);
}
});
});
};
The issue was I needed to declare the record variable outside of the before code block otherwise, when we exited the before function, it ceased to exist by the time I came to query it in the subsequent test..
Declaration goes just before the before function:
const getAcceptanceCriteria = (testCase) => {
let getAcceptanceCriteriaResponse;
let myLicenceChecksPassed = false;
// eslint-disable-next-line prefer-const
// eslint-disable-next-line no-array-constructor
const acceptanceCriteriaHashes = new Array();
let record;
describeTest(`${testCase.testCaseId} - ${testCase.testDescription}`, async () => {
before(async () => {
if (testCase.myLicenceChecksPassed !== undefined) {
myLicenceChecksPassed = testCase.myLicenceChecksPassed;
}
getAcceptanceCriteriaResponse = await getAcceptanceCriteriaAPICall(testCase.productId, testCase.assetType, testCase.underwriter, myLicenceChecksPassed);
if (getAcceptanceCriteriaResponse != undefined && getAcceptanceCriteriaResponse.body.Detail.length > 0) {
for (let i = 0; i < getAcceptanceCriteriaResponse.body.Detail.length; i++) {
// eslint-disable-next-line prefer-const
let response = await readAcceptanceCriteriaHashes(getAcceptanceCriteriaResponse.body.Detail[i].ContentHash);
if (response != undefined) {
record = { Hash: response.Hash, Criteria: response.Criteria };
acceptanceCriteriaHashes.push(record);
}
}
console.log(acceptanceCriteriaHashes);
}
});

Mongoose Query FindOne with array

So i want to verify if a value is inside the collection. I've managed to do it using .map. My code looks like this (the field is nested):
const loopFields = [
"nested.field1",
"nested.field2",
"nested.field3",
"nested.field4"
];
async function getField() {
const field = loopFields.map(async (fld, idx) => {
const result = await Field.findOne({ [fld]: req.body.field });
if (result) {
return fld;
}
});
const isFound = await Promise.all(field);
for (i = 0; i < loopFields.length; i++) {
if (isFound[i] !== undefined) {
return true;
}
}
}
const isValid = await getField();
if (!isValid) {
return res.status(400).send("Field not found");
}
The code does work but i'm looking for a way to reffactore it.
build an $or clause dynamically and pass it to the find method like so:
var loopFields = [
"nested.field1",
"nested.field2",
"nested.field3",
"nested.field4"
];
var fields = loopFields.map(field => {
var x = {};
x[field] = req.body.field;
return x;
})
db.collection.find({ $or: fields });

IDB: openCursor() is not a function

Well, maybe I do something wrong... But this error is very confusing. I stick with: "Uncaught TypeError: requestChatHistory.openCursor is not a function at IDBOpenDBRequest.dbPromise.onsuccess"
IDBOpenRequest might inherit methods from IDBRequest...
I tried to make request without openCursor() and get the first value from it.
Also tried to re-create database, use different browsers (Chrome, Edge, Firefox)
onUpgrade promise:
dbPromise.onupgradeneeded = function(event) {
let db = event.target.result;
db.createObjectStore('keys', {keyPath: 'userId'});
let chatHistory = db.createObjectStore('messages', { keyPath: "id", autoIncrement:true });
chatHistory.createIndex("chatId", "chatId", { unique: false });
};
There is my function with request:
async function loadSavedMessages(chatId){
let dbPromise = idb.open('clientDB', 3);
dbPromise.onsuccess = function() {
let db = this.result;
let dbTransaction = db.transaction(["messages"]);
let messages = dbTransaction.objectStore("messages");
let index = messages.index('chatId');
let requestChatHistory = index.get(chatId);
requestChatHistory.openCursor().onsuccess = function(event) {
let cursor = event.target.result;
if (cursor) {
console.log(cursor);
cursor.continue();
}
};
}
}
Function that saves data:
async function saveMessage(chatId, message, userId){
let dbPromise = idb.open('clientDB', 3);
dbPromise.onsuccess = function() {
let db = this.result;
let dbTransaction = db.transaction(["messages"], 'readwrite');
let messages = dbTransaction.objectStore("messages");
let mesObj = {
chatId: chatId,
user: userId,
message: message,
timestamp: Date.now()
};
let save = messages.add(mesObj);
save.onerror = function(event) {
// Handle errors!
console.log("Something went wrong with local DB :(")
};
save.onsuccess = function(event) {
// Do something with the request.result!
console.log(`Message saved, id ${save.result}`);
};
}
}
This is your problem:
let requestChatHistory = index.get(chatId);
requestChatHistory.openCursor().onsuccess = function(event) {
requestChatHistory is an IDBRequest, which has no openCursor method. openCursor is on IDBIndex, like your index variable. So maybe you meant to do something like:
index.openCursor(chatId).onsuccess = function(event) {

Confirmed populated array of objects returns empty

I have a method that is failing when returning an array of objects. As mentioned in the title - the array is confirmed to be populated but is empty in the response.
Here is the full flow:
The Url:
http://localhost:53000/api/v1/landmarks?lat=40.76959&lng=-73.95136&radius=160
Is routed to the corresponding index:
api.route('/api/v1/landmarks').get(Landmark.list);
The Index Calls a Service:
exports.list = (req, res) => {
const landmark = new LandmarkService();
landmark.getLandmarks(req)
.then(landmarks => {
var response = new Object();
response.startindex = req.query.page;
response.limit = req.query.per_page;
response.landmarks = landmarks;
res.json(response);
})
.catch(err => {
logger.error(err);
res.status(422).send(err.errors);
});
};
The Service Method Uses a Data Access Class to Return the Promise
getLandmarks(req) {
const params = req.params || {};
const query = req.query || {};
const page = parseInt(query.page, 10) || 1;
const perPage = parseInt(query.per_page, 10);
const userLatitude = parseFloat(query.lat);
const userLongitude = parseFloat(query.lng);
const userRadius = parseFloat(query.radius) || 10;
const utils = new Utils();
const data = new DataService();
const landmarkProperties = ['key','building','street','category','closing',
'email','name','opening','phone','postal','timestamp','type','web'];
return data.db_GetAllByLocation(landmarksRef, landmarkLocationsRef,
landmarkProperties, userLatitude, userLongitude, userRadius);
} // getLandmarks
However, the response is always empty.
I am building an array in the called method and populating it with JSON objects. That is what is supposed to be sent back in the response. I can confirm that the attributes array is correctly populated before I hit the return statement. I can log it to the console. I can also send back a test array filled with stub values successfully.
I have a feeling it is how I am setting things up inside the Promise?
Data Access Method That Should Return Array of Objects:
db_GetAllByLocation(ref, ref_locations, properties, user_latitude, user_longitude, user_radius)
{
const landmarkGeoFire = new GeoFire(ref_locations);
var geoQuery = landmarkGeoFire.query({
center: [user_latitude, user_longitude],
radius: user_radius
});
var locations = [];
var onKeyEnteredRegistration = geoQuery.on("key_entered", function (key, coordinates, distance) {
var location = {};
location.key = key;
location.latitude = coordinates[0];
location.longitude = coordinates[1];
location.distance = distance;
locations.push(location);
});
var attributes = [];
var onReadyRegistration = geoQuery.on("ready", function() {
ref.on('value', function (refsSnap) {
refsSnap.forEach((refSnap) => {
var list = refSnap;
locations.forEach(function(locationSnap)
{
//console.log(refSnap.key, '==', locationSnap.key);
if (refSnap.key == locationSnap.key)
{
var attribute = {};
for(var i=0; i<=properties.length-1; i++)
{
if(properties[i] == 'key') {
attribute[properties[i]] = refSnap.key;
continue;
}
attribute[properties[i]] = list.child(properties[i]).val();
}
attribute['latitude'] = locationSnap.latitude;
attribute['longitude'] = locationSnap.longitude;
attribute['distance'] = locationSnap.distance;
attributes.push(attribute);
} // refSnap.key == locationSnap.key
}); // locations.forEach
}); // refsSnap.forEach
return Promise.resolve(attributes); <-- does not resolve (throws 'cannot read property .then')
//geoQuery.cancel();
}); // ref.on
}); // onreadyregistration
return Promise.resolve(attributes); <-- comes back empty
}
It seems that data.db_GetAllByLocation is an asynchronous function, therefore the call resolve(landmarks); is getting called before the execution of the async function is finished. If the data.db_GetAllByLocation returns a promise then call the resolve(landmarks) inside the promise.
data.db_GetAllByLocation().then(function() {
resolve();
})
Also try the following modified db_GetAllByLocation()
db_GetAllByLocation(ref, ref_locations, properties, user_latitude, user_longitude, user_radius)
{
return new Promise(function(resolve, reject){
const landmarkGeoFire = new GeoFire(ref_locations);
var geoQuery = landmarkGeoFire.query({
center: [user_latitude, user_longitude],
radius: user_radius
});
var locations = [{}];
var onKeyEnteredRegistration = geoQuery.on("key_entered", function (key, coordinates, distance) {
var location = {};
location.key = key;
location.latitude = coordinates[0];
location.longitude = coordinates[1];
location.distance = distance;
locations.push(location);
});
var attributes = [{}];
var onReadyRegistration = geoQuery.on("ready", function() {
ref.on('value', function (refsSnap) {
refsSnap.forEach((refSnap) => {
var list = refSnap;
locations.forEach(function(locationSnap)
{
if (refSnap.key == locationSnap.key)
{
var attribute = {};
for(var i=0; i<=properties.length-1; i++)
{
if(properties[i] == 'key') {
attribute[properties[i]] = refSnap.key;
continue;
}
attribute[properties[i]] = list.child(properties[i]).val();
}
attribute['latitude'] = locationSnap.latitude;
attribute['longitude'] = locationSnap.longitude;
attribute['distance'] = locationSnap.distance;
attributes.push(attribute);
} // refSnap.key == locationSnap.key
}); // locations.forEach
}); // refsSnap.forEach
// return JSON.stringify(attributes);
return resolve(attributes);
}); // ref.on
}); // onreadyregistration
});
}
OK, I sorted this by removing all my code and writing some test logic (I should have done this before I posted my question).
The below flow works for me, and, applied back to my code, gave me the results I was looking for. No need to re-post the code, but maybe the below flow will be helpful to somebody.
route
api.route('/api/v1/landmarks').get(Landmark.test);
index
exports.test = (req, res) => {
const landmark = new LandmarkService();
landmark.getLandmarksTest(req)
.then(landmarks => {
var final = {};
final.attr1 = 'attr1';
final.attr2 = 'attr2';
final.landmarks = landmarks;
res.json(final);
})
.catch(err => {
logger.error(err);
res.status(422).send(err.errors);
});
};
service method
getLandmarksTest(req)
{
const data = new DataService();
data.db_PromiseTest().then(results => {
return Promise.resolve(results);
}).catch(err => {
return Promise.reject(err.errors);
});
}
data layer method
db_PromiseTest()
{
var stub = {
"name": "Madame Uppercut",
"age": 39,
"secretIdentity": "Jane Wilson",
"powers": [
"Million tonne punch",
"Damage resistance",
"Superhuman reflexes"
]
};
return Promise.resolve(stub);
}

IndexDB cursor .onsucess as a promise

First of all, I can't find a suitable title for this question - please feel free to edit.
I have the following function that reads objects from indexDb,
loadNeededParcels = property => {
const dbResults = [];
var readTransaction = this.db
.transaction("parcelData")
.objectStore("parcelData");
readTransaction.openCursor().onerror = e => {
console.log("open cursor error ", e);
};
readTransaction.openCursor().onsuccess = e => {
const cursor = e.target.result;
if (cursor) {
dbResults.push(cursor.value);
cursor.continue();
} else {
return dbResults;
}
};
};
Now when I call this function with a simple function call, for example:
console.log(loadNeededParcels('hasData'))
The console log is undefined. I am guessing this happens because the function does not wait for the cursor to finish and return the dbResults variable?
So my question is this - how can I re-write this function as a promise, or rather to wait for the readTransaction.openCursor().onsucess to trigger?
So the expected result is for the function to actually return the values read from the database before exiting.
I am using cursors since the .getAll() the method is not supported in IE.
A simple solution that I ended up using:
loadNeededParcels = property => {
return new Promise((resolve, reject) => {
var readTransaction = this.db
.transaction("parcelData")
.objectStore("parcelData");
readTransaction.openCursor().onerror = e => {
reject(e);
};
const dbResults = [];
readTransaction.openCursor().onsuccess = e => {
const cursor = e.target.result;
if (cursor) {
dbResults.push(cursor.value);
cursor.continue();
} else {
resolve(dbResults);
}
};
});
};
Try something like this. Do not call openCursor twice, that creates two requests.
function loadNeededParcels(db, property) {
return new Promise(function(resolve, reject) {
var results = [];
var tx = db.transaction('parcelData');
tx.onerror = function(event) {
reject(tx.error);
};
var store = tx.objectStore('parcelData');
// Open a cursor over all items
var request = store.openCursor();
request.onsuccess = function(event) {
var cursor = request.result;
if(cursor) {
var value = cursor.value;
if(value) {
// Only append defined values to the array
results.push(cursor.value);
}
cursor.continue();
} else {
resolve(results);
}
};
});
}
loadNeededParcels(db, 'hasData').then(function(results) {
console.log('Results', results);
}).catch(function(error) {
console.error(error);
});

Categories