Read Data from JavaScript IndexedDB

The indexedDB database displays the data from the table or database. It is used to get key information, values, and all content from the database.

There are the following methods and functions to read data from javascript indexedDB.

Read an object store's key contents.
Read an object store's index contents.
Read an object store's entire contents.

Read an object store's key contents.

Use the object store's get() method to read and get an object based on its key. The getNamesById() function below finds a Name based on an ID.

Syntax

The following method and functions read the key data of the object store.

The create function to get key information with the id.

function getNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(id);
query_variable.onsuccess = (event) => {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
};
txn_variable.oncomplete = function () {
db_variable.close();
};
};

The "onsuccess" event shows id data in the table format.

request.onsuccess = (event) => {
const db_variable= event.target.result;
getNamesById(db_variable, 30);
};

The "30" is the id of the indexedDB database to get information.
If the id is unavailable, an error event occurs and gets an error function.

Examples

The examples show available data and do not show available data with success and error events.

Example 1

The example shows the key value of the object store using the javascript function. If the id of indexedDB is available, then the success event shows the output. If the id is unavailable, then the error event shows the output.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object store
// use the auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function getNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(id);
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${id} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
getNamesById(db_variable, 3);
};
</script>
</html>

Output

The following image shows the read data with the index id with a successful event.

Example 2

The example shows the key value of the object store using the javascript get() function. If the id of the indexedDB database does not become available, then an error event shows the output. We can use an error event or error message as an output.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object through auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function getNamesById(db_variable, id) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(id);
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${id} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
getNamesById(db_variable, 30);
};
</script>
</html>

Output

The following image shows the read data with the index id with an error event.

Read an object store's index contents.

Use the object stores in the index() method to read and get the indexed column value. The getNamesByRank() function below finds the rank of the object.

Syntax

The following method and functions read the key data of the object store.

The create function to get key information with the id.
function getNamesByRank(db_variable, rank) {

const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
const index_data = store_variable.index('rank');
let query_variable = index_data.get(rank);
query_variable.onsuccess = (event) => {
console.table(event.target.result);
};
txn_variable.oncomplete = function () {
db_variable.close();
};
};

The "onsuccess" event shows index column data in the table format.

request.onsuccess = (event) => {
const db_variable = event.target.result;
getNamesByRank(db_variable, 'second');
};

Examples

The example shows the index value of the object store using the javascript function. If the rank of indexedDB is available, then the success event shows the output. If the id is unavailable, then an error event shows the output.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<title> JavaScript IndexedDb Demo </title>
</head>
<body>
<h2> JavaScript IndexedDb Demo </h2>
</body>
<script>
const request = indexedDB.open('DB_name', 1);
// create the Names object store and indexes
request.onupgradeneeded = (event) => {
let db_variable = event.target.result;
// create the Names object through auto-increment id
let store_variable = db_variable.createObjectStore('Names', {
autoIncrement: true
});
};
function getNamesById(db_variable, Rank) {
const txn_variable = db_variable.transaction('Names', 'readonly');
const store_variable = txn_variable.objectStore('Names');
let query_variable = store_variable.get(Rank);
query_variable.onsuccess = (event) => {
if (!event.target.result) {
console.log("JavaScript IndexedDb Demo Error");
console.log(`The email of the ${Rank} id does not found`);
} else {
console.log("JavaScript IndexedDb Demo");
console.table(event.target.result);
}
};
query_variable.onerror = (event) => {
console.log(event.target.errorCode);
}
txn_variable.oncomplete = function () {
db_variable.close();
};
};
request.onsuccess = (event) => {
const db_variable= event.target.result;
getNamesById(db_variable, 2);
};
</script>
</html>

Output

The following output image shows the required information from the database.

Read an object store's whole contents.

The indexedDB database reads and displays available data using the javascript function, events, and methods.

Syntax

The following demonstrates how to read every object from the Contacts object storage using a cursor:

function getAllContacts(db_variable) {
const index_data = db_variable.transaction('Names', "readonly");
const objectStore = index_data.objectStore('Names');
objectStore.openCursor().onsuccess = (event) => {
let cursor = event.target.result;
if (cursor) {
let contact = cursor.value;
console.log(contact);
cursor.continue();
}
};
index_data.oncomplete = function () {
db_variable.close();
};

Explanation

The cursor returned by objectStore.openCursor() can be used to loop through an object store.
You must designate an onsuccess handler to use the cursor to loop across the objects in an object store.
The cursor is returned by event.target.result. You can use the cursor to retrieve the data.
The object store's cursor is moved forward by the continue() method to the location of the available record.
To display all information from the Contacts object storage, the following invokes the getAllContacts() function in the onsuccess event handler.

request.onsuccess = (event) => {
const db_variable = event.target.result;
// get all contact details
getAllContacts(db_variable);
};

Example

The example shows the browser's support and displays data to the IndexedDb with an event called by javascript. The function uses an insert event to store multiple data and shows all data available in the database.

<!DOCTYPE html>
<html>
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <title> JavaScript IndexedDb Demo </title>
   </head>
   <body>
      <h2> JavaScript IndexedDb Demo </h2>
      <p id = "demos"> </p>
      <p id = "demo2"> </p>
   </body>
   <script>
   const request = indexedDB.open('DB_name', 1);
    // create the Names object store and index id
 request.onupgradeneeded = (event) => {
     let db_variable = event.target.result;
     // create the Names object for auto-increment id
     let store_variable = db_variable.createObjectStore('Names', {
         autoIncrement: true
     });
     // create an index on the email property,
     let index_data = store_variable.createIndex('email', 'email', {
         unique: true
     });
 };
      function getAllContacts(db_variable) {
    const index_data = db_variable.transaction('Names', "readonly");
    const objectStore = index_data.objectStore('Names');
    objectStore.openCursor().onsuccess = (event) => {
        let cursor = event.target.result;
        if (cursor) {
            let contact = cursor.value;
            console.log(contact);
            // go on the next record
            cursor.continue();
        }
    };
    // close the given database connection
    index_data.oncomplete = function () {
        db_variable.close();
    };
    // get the Names object store_variable
    const store_variable = text_data.objectStore('Names');
    let db_que = store_variable.put(name);
    // operate success event
    db_que.onsuccess = function (event) {
        console.log(event);
    };
    // operate the error event
    db_que.onerror = function (event) {
        console.log(event.target.errorCode);
    }
    // close the database once the 
    // transaction completes
    text_data.oncomplete = function () {
        db_variable.close();
    };
}
request.onsuccess = (event) => {
    const db_variable = event.target.result;
    // get all contacts available in indexedDB
    getAllContacts(db_variable);
};
 </script>
</html>

Output

The following image shows the read data with the data variable.

Conclusion

The indexedDB database gives a method to read data using index, key and database name. We can read and display whole and specific data as per requirement.

Next TopicDelete data from javascript indexedDB

← prev next →