migrate IndexedDB data to an array in JS

Question

I am relatively new to web development and currently trying to work out an "offline" Application with vue.js and dexie.js. Dexie.js allows easier access on modern browsers Indexed Database.

Nontheless I believe my problem is more on the basic javascript side.

I got this basic 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',
});

(yes, only one player is allowed)

..and editing and adding data into the indexedDB works perfectly fine... Now I am trying to transfer data from the IndexedDB to an array for easier visuals within Vue.js (I chose noneOf because I don't mind the player to leave the name empty)

        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;
                    
                }
            });

when this is my array structure within the vue app:

        tasks : [
            {id: 0, name:"", str: 0, agi: 0, int: 0, vit: 0}
        ],

Sadly, it won't work as intended :

Unhandled rejection: TypeError: Cannot set property 'name' of undefined

I do know 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);
                }
            });
        },

js.js:136 hüpfen
js.js:137 10
js.js:138 2
js.js:139 5
js.js:140 10
js.js:136 instagrammen
js.js:137 10
js.js:138 10
js.js:139 10
js.js:140 10
js.js:136 lollen
js.js:137 1
js.js:138 1
js.js:139 1
js.js:140 1
js.js:136 rennen
js.js:137 5
js.js:138 3
js.js:139 2
js.js:140 

I am guessing that my mistake is within the structuring of the array but I am not sure..

Any help would be really appreciated and kind regards

Richard

Answer 1

You need to set app.tasks[i] to an empty object at the beginning of each assignment in the loop:

    transferDBtoArray() {
        db.tasks.where('name').noneOf().toArray(function(result) {
            for(var i= 0; i< result.length; i++) {
                app.tasks[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;
                
            }
        });

Or better yet:

transferDBtoArray() {
  db.tasks.where('name').noneOf().toArray(results => results.map(result => ({          
        id: result.id,
        name: result.name,
        str: result.str,
        int: result.int,
        vit: result.vit,
        agi: result.agi,
  })));