What could be causing the IndexDB to overlook my totalMoney object Store?

Question

What could be causing the IndexDB to overlook my totalMoney object Store?

If you're new to Index DB, you might be facing a simple fix issue that's not in your code. Utilizing live server for display, the error you encounter is regarding the total Money not displaying as expected in the HTML, generating a console error: Here. Your attention to this matter is appreciated.

Below is the content of my dbFunctions.js file:

let db;
let request = indexedDB.open("financeManager", 1);
...

Below are the addIncome.js and addIncome.html files respectively:

const dropdownIncome = document.getElementById("dropdownIncome");
const optionForms = document.querySelectorAll(".options");
//submit btns form
const submitOneTime = document.getElementById("submitOneTime");
const submitMonthly = document.getElementById("submitMonthly");
const submitInterest = document.getElementById("submitInterest");
...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select id="dropdownIncome">
        <option value="default">--</option>
        <option value="optionOneTime">
            One-Time Income
        </option>
        <option value="optionMonthly">
            Monthly Income
        </option>
        <option value="optionInterest">
            Interest Income
        </option>
    </select>
    ...
</body>
</html>

Next up are the addExpenses.js and addExpenses.html files:

const dropdownExpenses = document.getElementById("dropdownExpenses");
const optionForms = document.querySelectorAll(".options");
//submit btns form
const submitMonthly = document.getElementById("submitMonthly");
const submitOneTime = document.getElementById("submitOneTime");
const submitMortgage = document.getElementById("submitMortgage");
...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "addExpenses.css">
    <title>Document</title>
</head>
<body>
    ...
</body>
</html>

Finally, the financetracker.js, .css, and .html files:

//input daily expenses, includes consistent expenses as well as one-time purchases...
document.addEventListener("DOMContentLoaded", function(){
    var totalMoney = 10000000;
    checkAndInitializeTotalMoney(totalMoney);
    ...

.viewButtons{
    width: 350px;
    height: 200px;
    font-size: 50px;
    font-family: 'Times New Roman', Times, serif;
    border-radius: 10px;
}...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="financetracker.css">
</head>
<body>
    <div class="balanceBottomLine">
    ...
</body>
</html>

javascript html css indexeddb

Answer 1

Answer №1

There was an issue with the db variable in the dbFunctions.js file, appearing as undefined in the checkAndInitializeTotalMoney() method.

To resolve this:

You can address this by utilizing Promise and await constructs to ensure that the db is accessed prior to executing the checkAndInitializeTotalMoney() method. This serves as the initial solution.

In the context of:

dbFunctions.js AND finanstracker.html:

let db;
let request = indexedDB.open("financeManager", 1);


function openDb() {
    return new Promise((resolve, reject) => {
        request.onupgradeneeded = function(event) {
            db = event.target.result;
            db.createObjectStore("expenses", { keyPath: 'id', autoIncrement: true });
            db.createObjectStore("incomes", { keyPath: 'id', autoIncrement: true });
            db.createObjectStore("totalMoney", { keyPath: 'id', autoIncrement: true });
            if (!db.objectStoreNames.contains("totalMoney")) {
                
            }
        };

        request.onsuccess = function(event) {
            db = event.target.result;
            console.log("is db ok: " + db);
            resolve(db); //if db open success then accept and return
        };

        request.onerror = function(event) {
            console.log('error', event.target.errorCode);
            reject(event.target.errorCode); 
        };
    });
}

async function init(totalMoney) {
    try {
        await openDb();
        checkAndInitializeTotalMoney(totalMoney);
    } catch (error) {
        console.error("When db try to open error: ", error);
    }
}


function initializeTotalMoney(total){
    var transaction = db.transaction(['totalMoney'], 'readwrite');
    var objectStore = transaction.objectStore('totalMoney');

    var totalMoney = {
        'total': total
    };
    var request = objectStore.add(totalMoney);

    request.onsuccess = function(event){
        console.log("Successfull");
    }

    request.onerror = function(event){
        console.log("error adding total:" ,event.target.error);
    }
}

function checkAndInitializeTotalMoney(InitialValue) {

  console.log("db: " + db)

  var transaction = db.transaction(['totalMoney'], 'readonly');
  var objectStore = transaction.objectStore('totalMoney');

  var getRequest = objectStore.get(1);

  getRequest.onsuccess = function(e){
      if (!e.target.result){
          initializeTotalMoney(InitialValue);
      } else{
          console.log("totalMoney already initialized: ", e.target.result);
      }
  };
  getRequest.onerror = function(e){
      console.log("Error checking tot money: ", e.target.error);
  };


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0>
    <title>Document</title>
    <link rel="stylesheet" href="financetracker.css">

Then proceed to call the init() method in financetracker.js like so:

document.addEventListener("DOMContentLoaded", function() {
    var totalMoney = 10000000;
    init(totalMoney);
});

An alternative approach would be:

If aiming for a simpler structure, consider opening the db before each operation and performing actions accordingly.

dbFunctions.js:

    let db;
    let request = indexedDB.open("financeManager", 1);

    request.onupgradeneeded = function(event){
        
        db = event.target.result;
        db.createObjectStore("expenses", { keyPath:'id', autoIncrement: true});
        db.createObjectStore("incomes", {keyPath: 'id', autoIncrement: true});
        db.createObjectStore("totalMoney", {keyPath: 'id', autoIncrement: true});

        
        if (!db.objectStoreNames.contains("totalMoney")) {
        }
    };

    request.onsuccess = function(event) {
        db = event.target.result;
        console.log("is db ok: " + db);
    
    };

    request.onerror = function(event) { 
        console.log('error', event.target.errorCode);
    };

    //should only be used once, adds totalMoney as a db 
    function initializeTotalMoney(total) {
        var transaction = db.transaction(['totalMoney'], 'readwrite');
        var objectStore = transaction.objectStore('totalMoney');

        var totalMoney = {
            'total': total
        };
        var request = objectStore.add(totalMoney);

        request.onsuccess = function(event) {
            console.log("Successfull");
        }

        request.onerror = function(event) {
            console.log("error adding total:" ,event.target.error);
        }
    }

    function checkAndInitializeTotalMoney(db, InitialValue) {
        //OPEN HERE AGAIN
        const request = window.indexedDB.open("financeManager");
        request.onsuccess = (event) => {
            const db = event.target.result;
            console.log("db: " + db)

            var transaction = db.transaction(['totalMoney'], 'readonly');
            var objectStore = transaction.objectStore('totalMoney');

            var getRequest = objectStore.get(1);

            getRequest.onsuccess = function(e) {
                if (!e.target.result) {
                    initializeTotalMoney(InitialValue);
                } else {
                    console.log("totalMoney already initialized: ", e.target.result);
                }
            };
            getRequest.onerror = function(e) {
                console.log("Error checking tot money: ", e.target.error);
            };
        }
    }

Then invoke the init() method in financetracker.js as follows:

document.addEventListener("DOMContentLoaded", function() {
    var totalMoney = 10000000;
    checkAndInitializeTotalMoney(totalMoney);
});

Upon implementing either of these solutions, observe the console output:

https://i.sstatic.net/GSnx6.png

Answer 2

There was an issue with the db variable in the dbFunctions.js file, appearing as undefined in the checkAndInitializeTotalMoney() method.

To resolve this:

You can address this by utilizing Promise and await constructs to ensure that the db is accessed prior to executing the checkAndInitializeTotalMoney() method. This serves as the initial solution.

In the context of:

dbFunctions.js AND finanstracker.html:

let db;
let request = indexedDB.open("financeManager", 1);


function openDb() {
    return new Promise((resolve, reject) => {
        request.onupgradeneeded = function(event) {
            db = event.target.result;
            db.createObjectStore("expenses", { keyPath: 'id', autoIncrement: true });
            db.createObjectStore("incomes", { keyPath: 'id', autoIncrement: true });
            db.createObjectStore("totalMoney", { keyPath: 'id', autoIncrement: true });
            if (!db.objectStoreNames.contains("totalMoney")) {
                
            }
        };

        request.onsuccess = function(event) {
            db = event.target.result;
            console.log("is db ok: " + db);
            resolve(db); //if db open success then accept and return
        };

        request.onerror = function(event) {
            console.log('error', event.target.errorCode);
            reject(event.target.errorCode); 
        };
    });
}

async function init(totalMoney) {
    try {
        await openDb();
        checkAndInitializeTotalMoney(totalMoney);
    } catch (error) {
        console.error("When db try to open error: ", error);
    }
}


function initializeTotalMoney(total){
    var transaction = db.transaction(['totalMoney'], 'readwrite');
    var objectStore = transaction.objectStore('totalMoney');

    var totalMoney = {
        'total': total
    };
    var request = objectStore.add(totalMoney);

    request.onsuccess = function(event){
        console.log("Successfull");
    }

    request.onerror = function(event){
        console.log("error adding total:" ,event.target.error);
    }
}

function checkAndInitializeTotalMoney(InitialValue) {

  console.log("db: " + db)

  var transaction = db.transaction(['totalMoney'], 'readonly');
  var objectStore = transaction.objectStore('totalMoney');

  var getRequest = objectStore.get(1);

  getRequest.onsuccess = function(e){
      if (!e.target.result){
          initializeTotalMoney(InitialValue);
      } else{
          console.log("totalMoney already initialized: ", e.target.result);
      }
  };
  getRequest.onerror = function(e){
      console.log("Error checking tot money: ", e.target.error);
  };


}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0>
    <title>Document</title>
    <link rel="stylesheet" href="financetracker.css">

Then proceed to call the init() method in financetracker.js like so:

document.addEventListener("DOMContentLoaded", function() {
    var totalMoney = 10000000;
    init(totalMoney);
});

An alternative approach would be:

If aiming for a simpler structure, consider opening the db before each operation and performing actions accordingly.

dbFunctions.js:

    let db;
    let request = indexedDB.open("financeManager", 1);

    request.onupgradeneeded = function(event){
        
        db = event.target.result;
        db.createObjectStore("expenses", { keyPath:'id', autoIncrement: true});
        db.createObjectStore("incomes", {keyPath: 'id', autoIncrement: true});
        db.createObjectStore("totalMoney", {keyPath: 'id', autoIncrement: true});

        
        if (!db.objectStoreNames.contains("totalMoney")) {
        }
    };

    request.onsuccess = function(event) {
        db = event.target.result;
        console.log("is db ok: " + db);
    
    };

    request.onerror = function(event) { 
        console.log('error', event.target.errorCode);
    };

    //should only be used once, adds totalMoney as a db 
    function initializeTotalMoney(total) {
        var transaction = db.transaction(['totalMoney'], 'readwrite');
        var objectStore = transaction.objectStore('totalMoney');

        var totalMoney = {
            'total': total
        };
        var request = objectStore.add(totalMoney);

        request.onsuccess = function(event) {
            console.log("Successfull");
        }

        request.onerror = function(event) {
            console.log("error adding total:" ,event.target.error);
        }
    }

    function checkAndInitializeTotalMoney(db, InitialValue) {
        //OPEN HERE AGAIN
        const request = window.indexedDB.open("financeManager");
        request.onsuccess = (event) => {
            const db = event.target.result;
            console.log("db: " + db)

            var transaction = db.transaction(['totalMoney'], 'readonly');
            var objectStore = transaction.objectStore('totalMoney');

            var getRequest = objectStore.get(1);

            getRequest.onsuccess = function(e) {
                if (!e.target.result) {
                    initializeTotalMoney(InitialValue);
                } else {
                    console.log("totalMoney already initialized: ", e.target.result);
                }
            };
            getRequest.onerror = function(e) {
                console.log("Error checking tot money: ", e.target.error);
            };
        }
    }

Then invoke the init() method in financetracker.js as follows:

document.addEventListener("DOMContentLoaded", function() {
    var totalMoney = 10000000;
    checkAndInitializeTotalMoney(totalMoney);
});

Upon implementing either of these solutions, observe the console output:

https://i.sstatic.net/GSnx6.png

What could be causing the IndexDB to overlook my totalMoney object Store?

Answer №1

Similar questions

CSS - Discovering the reason behind the movement of text post generation (animation)

What is the best way to incorporate vertical lines into a set of progress bars?

React.js: The art of nesting components within each other

The JavaScript "sort()" method outlined in the Mozilla Documentation specifically created for the sorting of numbers

"Removing the default background color in the latest version of next.js: A step-by

Creating a unique Angular 2 Custom Pipe tutorial

Choose key and value pairs in AngularJS

Upon implementing a catch-all express routing solution, the Fetch API calls are no longer successful. The error message received is "Unexpected token < in JSON at

How to create a full-page background image using Bootstrap?

Event binding done correctly

Adjust the color of input labels using jQuery validate

What is the best way to stack div elements one after the other?

Creating padding for a Drawer component in Material-UI with React JS

Is it possible to invoke a Node.js function within PugJS?

I'm a beginner in jest and I'm curious, how should I go about writing a test for this

Angular project experiencing issues with Bootstrap integration

Adjust the size of fonts for elements that are added dynamically

Bootstrap select box gracefully fits within a dynamically adjusting height div

Expand the width of the image gradually until it reaches its initial size within a flexible DIV container

There seems to be an issue with the item display page when clicking on the 'view details' button within the Bootstrap tab