Hola que tal estoy intentando aprender a utilizar fetch() en Javascript. Estoy consumiendo un API publica la cual es jsonplaceholder.
He utilizado el método GET y la verdad no tengo ningún problema, muestro los datos en una tabla de manera dinámica con Javascript.
Pero cuando quiero borra un dato, utilizando el método 'DELETE' no lo hace, he utlizado asyn & await y no lo logro solucionar, el codigo es el siguiente estoy utilizando bootstrap y alertify para mostrar alertas de una manera mas bonita.
Tambien adjunto el repositorio aqui para que lo pueden checar de una manera mas simple y comoda en github.
//Definición de variables
const url = 'https://jsonplaceholder.typicode.com/users/'
const contenedor = document.querySelector('tbody')
let resultados = ''
const modalArticulo = new bootstrap.Modal(document.getElementById('modalArticulo'))
const formArticulo = document.querySelector('form')
const descripcion = document.getElementById('descripcion')
const precio = document.getElementById('precio')
const stock = document.getElementById('stock')
var opcion = ''
btnCrear.addEventListener('click', () => {
descripcion.value = ''
precio.value = ''
stock.value = ''
modalArticulo.show()
opcion = 'crear'
})
//funcion para mostrar los resultados
const mostrar = (articulos) => {
articulos.forEach(articulo => {
resultados += `<tr>
<td>${articulo.id}</td>
<td>${articulo.name}</td>
<td>${articulo.name}</td>
<td>${articulo.name}</td>
<td class="text-center">
<a class="btnEditar btn btn-primary">Editar</a>
<a class="btnBorrar btn btn-danger">Borrar</a> </td>
</tr>
`
})
contenedor.innerHTML = resultados
}
//Procedimiento Mostrar
fetch(url)
.then(response => response.json())
.then(data => mostrar(data))
.catch(error => console.log(error))
const on = (element, event, selector, handler) => {
element.addEventListener(event, async e => {
if (e.target.closest(selector)) {
handler(e)
}
})
}
//Procedimiento Borrar
on(document, 'click', '.btnBorrar', e => {
const fila = e.target.parentNode.parentNode
const id = fila.firstElementChild.innerHTML
alertify.confirm('Mensaje lorem',
async function () {
const res = await fetch(url + id, {
method: 'DELETE'
})
const json = await res.json()
//location.reload()
console.log(json);
},
function () {
alertify.error('Cancel')
}
)
})
<!doctype html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/style.css">
<!--& Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!--% CSS Alertify-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css" />
<!--% Default theme Alertify-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css" />
<title>Bienvenidos !!!</title>
</head>
<body>
<!--$ Table -->
<div class="container mt-4 shadow-lg p-3 bg-body rounded">
<button id="btnCrear" type="button" class="btn btn-primary" data-bs-toggle="modal">Crear</button>
<table id="tablaArticulos" class="table mt-2 table-bordered table-striped">
<thead>
<tr class="text-center">
<th>Id</th>
<th>Descripción</th>
<th>Precio</th>
<th>Stock</th>
<th>Acciones</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!--$ Modal -->
<div id="modalArticulo" class="modal fade" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white rounded">
<h5 class="modal-title" id="exampleModalLabel">Articulos</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!--$ Modal - Form -->
<form>
<div class="mb-3">
<label for="descripcion" class="col-form-label">Descripción</label>
<input id="descripcion" type="text" class="form-control">
</div>
<div class="mb-3">
<label for="precio" class="col-form-label">Precio</label>
<input id="precio" type="number" class="form-control">
</div>
<div class="mb-3">
<label for="stock" class="col-form-label">Stock</label>
<input id="stock" type="number" class="form-control">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-primary">Guardar</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!--$ #################### Resources ##################### -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
<!--& JavaScript Alertify-->
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>
<!--& Javascript- index.js -->
<script src="JS/index.js"></script>
</body>
</html>