Loading a value using Transaction in Dexie

cynderkromi

I have an application where I store a Persons ID in one table, done from one Quasar page. Then I have another Quasar page that needs to retrieve that value from the table, and query another table (people) to get all the person’s data in the people table.

I am using a Dexie transaction to do this, and when I output the values into the console I can see the values just fine. Until I try to store the value into a variable, then things break, and I’m not sure what’s going wrong.

The line: this.aPersonID.push(theOne.p_key) Is not working. When I include that in my code, the line below it (the console.log) does not get written. When I comment that out, the console.log below it does get written out.

I’m not sure what I need to fix? Thanks.

import Dexie from 'dexie';
var pawTapDB = new Dexie('pawTapDB')
pawTapDB.version(1.5).stores({
        peopleTable: '++p_key,l_name,p_email',
        tableHoldPersonID: '++thpid_key',
        dogTable: '++p_dog,callName',
    })
    
    
export default {
  name: 'PeopleDetails',
  data() {
    return {
      thePersonsIDis: [],
      aPersonID: '',

      personOBJID: [],
      thePersonFromPeople: ''
  }
  
  methods: {

  theGetPeopleMethod() {
    console.log("     People Details: theGetPeopleMethod START ")
    pawTapDB.transaction('r', pawTapDB.tableHoldPersonID, pawTapDB.peopleTable, () => {
      console.log("     People Details: theGetPeopleMethod transaction started  ")

      pawTapDB.tableHoldPersonID.each( function (friend) {  
        console.log("     People Details: theGetPeopleMethod in friend RETURN A ", friend) 

          repawTapDB.peopleTable.where({p_key: friend.personID}).each( function (theOne) {
            console.log("     People Details: theGetPeopleMethod theOne: ", theOne.p_key, theOne)
            this.aPersonID.push(theOne.p_key) ///. ***** this doesn't work
            //return this.aPersonID = this.theOne.p_key
            console.log("     People Details: theGetPeopleMethod in friend RETURN B  ", friend) 
          })
      })
    }).then(() => {
        console.log("     People Details: Transaction committed")

    }).catch(err => {
        console.log("     People Details: Transaction aborted")

    })
  }
}

beets

@cynderkromi said in Loading a value using Transaction in Dexie:

aPersonID: ‘’

This is a string but you’re trying to push into it. Do you mean to make it aPersonID: [], ?

cynderkromi

@beets even if I make it an array, the value still doesn’t get loaded into aPersonID, and the “Return B” console log doesn’t appear in the console. So I’m not sure what syntax I’m doing wrong.

beets

@cynderkromi Looking at it again, it’s probably due to the callbacks not using arrow functions. See below, I only changed the two lines with use arrow function comment. When not using arrow functions, the value of this changes and would no longer point to the Vue data object. Hopefully this solves the issue.

  theGetPeopleMethod() {
    console.log("     People Details: theGetPeopleMethod START ")
    pawTapDB.transaction('r', pawTapDB.tableHoldPersonID, pawTapDB.peopleTable, () => {
      console.log("     People Details: theGetPeopleMethod transaction started  ")

      pawTapDB.tableHoldPersonID.each( (friend) => { // use arrow function  
        console.log("     People Details: theGetPeopleMethod in friend RETURN A ", friend) 

          repawTapDB.peopleTable.where({p_key: friend.personID}).each( (theOne) => { // use arrow function
            console.log("     People Details: theGetPeopleMethod theOne: ", theOne.p_key, theOne)
            this.aPersonID.push(theOne.p_key) ///. ***** this doesn't work
            //return this.aPersonID = this.theOne.p_key
            console.log("     People Details: theGetPeopleMethod in friend RETURN B  ", friend) 
          })
      })
    }).then(() => {
        console.log("     People Details: Transaction committed")

    }).catch(err => {
        console.log("     People Details: Transaction aborted")

    })
  }

cynderkromi

@beets Thank you so much! That works! I was under the impression that the => and the function were interchangeable. Now I know they are not.

beets

@cynderkromi Correct, the main different is what the value of this will be when using a regular function vs arrow. In the olden days before arrow functions you’d see this a lot (which would still work):

  theGetPeopleMethod() {
    const that = this // store this reference

    console.log("     People Details: theGetPeopleMethod START ")
    pawTapDB.transaction('r', pawTapDB.tableHoldPersonID, pawTapDB.peopleTable, () => {
      console.log("     People Details: theGetPeopleMethod transaction started  ")

      pawTapDB.tableHoldPersonID.each( function (friend) {  
        console.log("     People Details: theGetPeopleMethod in friend RETURN A ", friend) 

          repawTapDB.peopleTable.where({p_key: friend.personID}).each( function (theOne) {
            console.log("     People Details: theGetPeopleMethod theOne: ", theOne.p_key, theOne)
            that.aPersonID.push(theOne.p_key) ///. ***** use that instead of this
            //return that.aPersonID = that.theOne.p_key
            console.log("     People Details: theGetPeopleMethod in friend RETURN B  ", friend) 
          })
      })
    }).then(() => {
        console.log("     People Details: Transaction committed")

    }).catch(err => {
        console.log("     People Details: Transaction aborted")

    })
  }

Notice the use of that.aPersonID.push(theOne.p_key) instead of this

cynderkromi

@beets Thanks so much! It works great now.

No More Posting New Topics!

Loading a value using Transaction in Dexie