Hello, I am quite new to web development and currently experimenting with creating an "offline" application using vue.js and dexie.js. Dexie.js provides easier access to Indexed Database on modern browsers.
However, I believe my issue lies more in the basic JavaScript realm.
I have set up this simple DB (enhanced with Dexie):
var db = new Dexie("appDatabase");
db.version(1).stores({
tasks: '++id,name, agi, str, vit, int',
player: 'id, name, agi, str, vit, int',
});
(only one player is allowed)
...and I have successfully managed to edit and add data into the indexedDB; now I am attempting to transfer data from IndexedDB to an array for better visualization within Vue.js.
transferDBtoArray() {
db.tasks.where('name').noneOf().toArray(function(result) {
for(var i= 0; i< result.length; i++) {
app.tasks[i].id = result[i].id;
app.tasks[i].name = result[i].name;
app.tasks[i].str = result[i].str;
app.tasks[i].int = result[i].int;
app.tasks[i].vit = result[i].vit;
app.tasks[i].agi = result[i].agi;
}
});
Here is the structure of my array within the Vue app:
tasks : [
{id: 0, name:"", str: 0, agi: 0, int: 0, vit: 0}
],
Unfortunately, it is not working as expected:
Unhandled rejection: TypeError: Cannot set property 'name' of undefined
I am aware that accessing data from the DB works fine:
test() {
db.tasks.where('name').noneOf().toArray(function(result) {
for(var i= 0; i< result.length; i++) {
console.log( result[i].name);
console.log( result[i].agi);
console.log( result[i].str);
console.log( result[i].int);
console.log( result[i].vit);
}
});
},
I suspect that my mistake lies in the way I structured the array, but I am not entirely sure...
Any help would be greatly appreciated. Kind regards,
Richard