DEV Community

Andrés Valdivia Cuzcano
Andrés Valdivia Cuzcano

Posted on

Agregando datos a la BD

Para agregar nuevos objetos al Object Store se realizar un request usando el método add(object) del objeto objectStore obtenido de la transacción creada. Luego, se maneja los eventos dependiendo lo que se desee realizar una vez completada la operación.
El resultado de la petición (request) es el key del objeto agregado.

// Conexion a la BD (IDBDatabase)
let db;

function createDatabase() {
    //...

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

    request.onsuccess = (e) => {
        // Se crea conexion
        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');

    // Se agrega un nuevo estudiante
    const request = objectStore.add(student);

    request.onsuccess = ()=> {
        // request.result contiene el key del objeto agregado
        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)
Enter fullscreen mode Exit fullscreen mode

Una forma más abreviada y ordenada de hacer esto, tomando en cuenta que los eventos de la transacción "dependerán" de lo que pase con la petición, sería:

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);
Enter fullscreen mode Exit fullscreen mode

Lo anterior está bien si solo se desea agregar un estudiante cada vez que se ejecute la función, sin embargo, si se desea agregar varios estudiantes lo mejor es tener la transacción y el objectStore por separado, ya que la transacción estará activa mientras haya peticiones pendientes y el objectStore nos da acceso a la “tabla” (Object Store). Además, ahora los eventos de la transacción no "dependen" de la petición, por ejemplo, el evento complete se lanzará cuando TODOS los elementos hayan sido agregados. El código quedaría así:

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)
Enter fullscreen mode Exit fullscreen mode

Top comments (0)