Add data to IndexedDB
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-01-04 17:32:24

To add new objects to the _Object Store_, a request is made using the `add(object)` method of the **objectStore** obtained from the created transaction. Then the events are handled depending on what you want to do once the operation is completed.
The result of the request is the `key` of the added object.

```jsx
// IndexedDB connection (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Create DB connection
        db = request.result;
    };

    //...
}


function addStudent(student){
    const transaction = db.transaction('students', 'readwrite');

    transaction.oncomplete = function(event) {
        //...
    };

    transaction.onerror = function(event) {
      //...
    };

    const objectStore = transaction.objectStore('students');

    // Add new student
    const request = objectStore.add(student);

    request.onsuccess = ()=> {
        // request.result contains key of the added object
        console.log(`New student added, email: ${request.result}`);
    }

    request.onerror = (err)=> {
        console.error(`Error to add new student: ${err}`)
    }
}

const studentA = {
        name: 'Andres',
        lastname: 'Valdivia',
        email: 'pandres@pandres.com',
        age: 22
}

addStudent(studentA)
```

A short and tidy way of doing this, bearing in mind that the events of the transaction will "depend" on what happens with the request, would be:

```jsx
function addStudent(student){
    const request = db.transaction('students', 'readwrite')
                                                .objectStore('students')
                                                .add(student);

    request.onsuccess = ()=> {
        console.log(`New student added, email: ${request.result}`);
    }

    request.onsuccess = (err)=> {
        console.error(`Error to add new student: ${err}`)
    }
}

const studentA = {
        name: 'Andres',
        lastname: 'Valdivia',
        email: 'pandres@pandres.com',
        age: 22
}

addStudent(studentA);
```

The previous example is fine if you only want to add a student each time the function is executed. However, if you want to add several students it is best to have the transaction and the **objectStore** separately, since the transaction will be active as long as there are requests pending and the **objectStore** gives us access to the "table". Also now the events of the transaction don't "depend" on the request, for example, the `complete` event will be fired when ALL the objects have been added. The code would look like this:

```jsx
function addStudents(students){
    const transaction = db.transaction('students', 'readwrite');

    transaction.oncomplete = function(event) {
        console.log('All the students added successfully')
    };

    transaction.onerror = function(event) {
      //...
    };

    const objectStore = transaction.objectStore('students');

    for(student of students){
        const request = objectStore.add(student);

        request.onsuccess = ()=> {
            console.log(`New student added, email: ${request.result}`);
        }

        request.onsuccess = (err)=> {
            console.error(`Error to add new student: ${err}`)
        }
    }
}

const students = [
    {name: 'name1', lastname: 'lastname1',email: 'email1@email.com', age: 22},
    {name: 'name2', lastname: 'lastname2',email: 'email2@email.com', age: 24},
    {name: 'name3', lastname: 'lastname3',email: 'email3@email.com', age: 22},
    {name: 'name4', lastname: 'lastname4',email: 'email4@email.com', age: 23},
    {name: 'name5', lastname: 'lastname5',email: 'email5@email.com', age: 22}
]

addStudents(students)
```