En este capítulo veremos la segunda parte del ejercicio que comenzamos en el capítulo anterior, para ello vamos a utilizar un archivo JSON del cual vamos a consumir sus datos, y que os dejamos en el siguiente enlace.
En este segundo capítulo veremos como añadir, actualizar y eliminar datos de nuestro archivo.
Sintaxis del archivo crud_axios.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>CRUD API REST Axios</title> </head> <body> <h1>CRUD API REST Ajax</h1> <section id="crud"> <article> <h2 class="crud-title">Agregar nombre</h2> <form class="crud-form"> <input type="hidden" name="id" /> <input type="text" name="nombre" placeholder="Nombre" required /> <br /> <input type="text" name="constelacion" placeholder="constelación" required /> <br /> <input type="submit" value="Enviar" /> </form> </article> <article> <h2>Ver nombres</h2> <table class="crud-table"> <thead> <tr> <th>Nombre</th> <th>Constelación</th> <th>Acciones</th> </tr> </thead> <tbody></tbody> </table> </article> </section> <template id="crud-template"> <tr> <td class="name"></td> <td class="constellation"></td> <td> <button class="edit">Editar</button> <button class="delete">Eliminar</button> </td> </tr> </template> <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script> <script> const d = document, $table = d.querySelector(".crud-table"), $form = d.querySelector(".crud-form"), $title = d.querySelector(".crud-title"), $template = d.getElementById("crud-template").content, $fragment = d.createDocumentFragment(); const getAll = async () => { try { let res = await axios.get("http://localhost:5555/santos"), json = await res.data; json.forEach((el) => { $template.querySelector(".name").textContent = el.nombre; $template.querySelector(".constellation").textContent = el.constelacion; $template.querySelector(".edit").dataset.id = el.id; $template.querySelector(".edit").dataset.name = el.nombre; $template.querySelector(".edit").dataset.constellation = el.constelacion; $template.querySelector(".delete").dataset.id = el.id; let $clone = d.importNode($template, true); $fragment.appendChild($clone); }); $table.querySelector("tbody").appendChild($fragment); } catch (err) { let message = err.statusText || "Ocurrió un error"; $table.insertAdjacentHTML( "afterend", `<p><b>Error ${status}: ${message}/b></p>` ); } }; d.addEventListener("DOMContentLoaded", getAll); d.addEventListener("submit", async (e) => { if (e.target === $form) { e.preventDefault(); if (!e.target.id.value) { // Create - POST try { let options = { method: "POST", headers: { "Content-Type": "application/json; charset=utf-8", }, data: JSON.stringify({ nombre: e.target.nombre.value, constelacion: e.target.constelacion.value, }), }, res = await axios("http://localhost:5555/santos", options), json = await res.data; location.reload(); } catch (err) { let message = err.statusText || "Ocurrió un error"; $form.insertAdjacentElement( "afterend", `<p><b>Error ${err.status}: ${message}</b></p>` ); } } else { // Update - PUT try { let options = { method: "PUT", headers: { "Content-Type": "application/json; charset=utf-8", }, data: JSON.stringify({ nombre: e.target.nombre.value, constelacion: e.target.constelacion.value, }), }, res = await axios( `http://localhost:5555/santos/${e.target.id.value}`, options ), json = await res.data; location.reload(); } catch (err) { let message = err.statusText || "Ocurrió un error"; $form.insertAdjacentElement( "afterend", `<p><b>Error ${err.status}: ${message}</b></p>` ); } } } }); d.addEventListener("click", async (e) => { if (e.target.matches(".edit")) { $title.textContent = "Editar nombre"; $form.nombre.value = e.target.dataset.name; $form.constelacion.value = e.target.dataset.constellation; $form.id.value = e.target.dataset.id; } if (e.target.matches(".delete")) { let isDelete = confirm( `¿Estás seguro de eliminar el id ${e.target.dataset.id}?` ); if (isDelete) { // Delete - DELETE try { let options = { method: "DELETE", headers: { "Content-Type": "application/json; charset=utf-8", }, }, res = await axios( `http://localhost:5555/santos/${e.target.dataset.id}`, options ), json = await res.data; location.reload(); } catch (err) { let message = err.statusText || "Ocurrió un error"; alert(`Error ${err.status}: ${message}`); } } } }); </script> </body> </html>