Agregando datos a la BD
Tags: javascript, webdev, programming, 100daysofcode
Published: 2022-01-04 01:43:37

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.

```jsx
// 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)
```

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:

```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);
```

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í:

```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)
```