ARTICLE AD BOX
I am building a simple CRUD reference project using HTML, Bootstrap, and the Fetch API.
I currently have separate pages for GET and DELETE operations. The GET request loads data correctly into a table, while the DELETE request should remove an item by ID.
However, I am getting JavaScript issues related to template literals and fetch syntax, and I am not sure if my response handling logic is correct.
Is my handleResponse() implementation correct for Fetch API usage?
Here is the code:
INDEX HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CRUD Menu</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container mt-5 text-center"> <h2>CRUD REFERENCE MENU</h2> <a href="list.html" class="btn btn-primary m-2">GET - List</a> <a href="create.html" class="btn btn-success m-2">POST - Create</a> <a href="update.html" class="btn btn-warning m-2">PUT - Update</a> <a href="delete.html" class="btn btn-danger m-2">DELETE - Delete</a> </div> </body> </html>GET HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>List</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <h3>GET - List</h3> <button class="btn btn-primary mb-3" onclick="getAll()">Load</button> <table class="table table-bordered"> <thead> <tr> <th>ID</th> <th>Field1</th> <th>Field2</th> </tr> </thead> <tbody id="tbody"></tbody> </table> <div id="msg"></div> </div> <script> const API = "http://localhost:3000/api/items"; /* Message */ function showMessage(msg, type="success") { document.getElementById("msg").innerHTML = <div class="alert ${type==="success"?"alert-success":"alert-danger"}">${msg}</div>; } /* Error handling */ function handleResponse(res) { return res.json().then(data => { if (!res.ok) throw new Error(data.message || "Error"); return data; }); } /* GET */ function getAll() { fetch(API) .then(handleResponse) .then(data => { const tbody = document.getElementById("tbody"); tbody.innerHTML = ""; data.forEach(i => { tbody.innerHTML += ` <tr> <td>${i.id}</td> <td>${i.field1}</td> <td>${i.field2}</td> </tr> `; }); showMessage("Loaded", "success"); }) .catch(err => showMessage(err.message, "error")); } </script> </body> </html>POST HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Create</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <h3>POST - Create</h3> <input id="field1" class="form-control mb-2" placeholder="Field1"> <input id="field2" class="form-control mb-2" placeholder="Field2"> <button class="btn btn-success w-100" onclick="create()">Create</button> <div id="msg"></div> </div> <script> const API = "http://localhost:3000/api/items"; function showMessage(msg, type="success") { document.getElementById("msg").innerHTML = <div class="alert ${type==="success"?"alert-success":"alert-danger"}">${msg}</div>; } function handleResponse(res) { return res.json().then(data => { if (!res.ok) throw new Error(data.message || "Error"); return data; }); } /* POST */ function create() { const field1 = document.getElementById("field1").value; const field2 = document.getElementById("field2").value; fetch(API, { method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify({ field1, field2 }) }) .then(handleResponse) .then(data => { showMessage("Created ID: " + data.id, "success"); }) .catch(err => showMessage(err.message, "error")); } </script> </body> </html>PUT HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Update</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <h3>PUT - Update</h3> <input id="id" class="form-control mb-2" placeholder="ID"> <input id="field1" class="form-control mb-2" placeholder="Field1"> <input id="field2" class="form-control mb-2" placeholder="Field2"> <button class="btn btn-warning w-100" onclick="update()">Update</button> <div id="msg"></div> </div> <script> const API = "http://localhost:3000/api/items"; function showMessage(msg, type="success") { document.getElementById("msg").innerHTML = <div class="alert ${type==="success"?"alert-success":"alert-danger"}">${msg}</div>; } function handleResponse(res) { return res.json().then(data => { if (!res.ok) throw new Error(data.message || "Error"); return data; }); } /* PUT */ function update() { const id = document.getElementById("id").value; fetch(${API}/${id}, { method: "PUT", headers: {"Content-Type":"application/json"}, body: JSON.stringify({ field1: document.getElementById("field1").value, field2: document.getElementById("field2").value }) }) .then(handleResponse) .then(() => showMessage("Updated", "success")) .catch(err => showMessage(err.message, "error")); } </script> </body> </html>DELETE HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Delete</title> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> </head> <body> <div class="container mt-4"> <h3>DELETE - Delete</h3> <input id="id" class="form-control mb-2" placeholder="ID"> <button class="btn btn-danger w-100" onclick="remove()">Delete</button> <div id="msg"></div> </div> <script> const API = "http://localhost:3000/api/items"; function showMessage(msg, type="success") { document.getElementById("msg").innerHTML = <div class="alert ${type==="success"?"alert-success":"alert-danger"}">${msg}</div>; } function handleResponse(res) { return res.json().then(data => { if (!res.ok) throw new Error(data.message || "Error"); return data; }); } /* DELETE */ function remove() { const id = document.getElementById("id").value; fetch(${API}/${id}, { method: "DELETE" }) .then(res => { if (res.status === 204) { showMessage("Deleted", "success"); } else { return res.json().then(d => { throw new Error(d.message || "Delete error"); }); } }) .catch(err => showMessage(err.message, "error")); } </script> </body> </html>![Calling a JS function in HTML twice [closed]](https://stackoverflow.com/Content/Sites/stackoverflow/Img/apple-touch-icon@2.png?v=0f0cab681579)