feat(ch 5): added login & list of books for SimpleBackendAPI

2025-11-09 18:03:06 +01:00 · 2025-03-25 16:58:15 +01:00
parent a2283cbce2
commit 2a060caea7
2 changed files with 120 additions and 0 deletions
--- a/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoBooks.html
+++ b/Unidad_05_Javascript/AccesoSimpleBackenAPI/accesoBooks.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="es">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script>
+        function loadBooks() {
+            let booksTable = document.getElementById("booksTable");
+
+            const xhttp = new XMLHttpRequest();
+            xhttp.onload = function () {
+
+                if (xhttp.readyState === 4) { // 4 = La solicitud ha sido completada
+                    if (xhttp.status === 200 || xhttp.status === 201) {
+                        let strResponse = xhttp.responseText;
+                        console.log("Datos recibidos: " + strResponse);
+                        let jsonResponse = JSON.parse(strResponse);
+                        let responseArray = jsonResponse.content;
+                        console.log("Datos parseados: " + responseArray);
+                        for (let i = 0; i < responseArray.length; i++) {
+                            let book = responseArray[i];
+                            console.log("Book: " + book.id + " - "
+                                + book.titulo);
+                                booksTable.innerHTML += '<tr>' +
+                                '<td>' + book.id + '</td>' +
+                                '<td>' + book.titulo + '</td>' +
+                                '<td>' + book.autor + '</td>' +
+                                '<td>' + book.genero.nombre + '</td>' +
+                                '</tr>'
+                        }
+                    }
+                    else {
+                        console.log('Error al obtener la petición xhr.status: ' + xhttp.status);
+                    }
+                }
+            }
+
+            // Send a request
+            xhttp.open("GET", "http://localhost:8081/v1/books?page=0&size=1000&fieldOrder=titulo&orderType=asc");
+            xhttp.setRequestHeader("accept","application/json");
+            xhttp.setRequestHeader("Content-Type","application/json");
+            console.log("jwt recuperado de localStorage: " + localStorage.getItem("jwt"));
+            xhttp.setRequestHeader("Authorization", localStorage.getItem("jwt"));
+            xhttp.send();
+        }
+
+    </script>
+</head>
+
+<body body onload="loadBooks()">
+
+</body>
+<table id="booksTable" border="1" width="100%">
+    <tr>
+        <th>Id</th>
+        <th>Título</th>
+        <th>Autor</th>
+        <th>Género</th>
+    </tr>
+</table>
+
+</html>