2

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>

3
  • 2
    ¿A qué te refieres con "no lo hace"? ¿Te aparece mensaje de error o qué?. Ten en cuenta lo que menciona la documentación: Important: resource will not be really updated on the server but it will be faked as if. En español: Importante: El recurso no será realmente actualizado (eliminado) en el servidor, pero simulará que sí.
    – Triby
    el 23 may. 2021 a las 4:16
  • 1
    Tal como dice Triby, en realidad no eliminará los datos que la api te entrega. Solo imagínate si a alguien se le cruzara por la cabeza eliminarlas. Afectaría a todos los que estemos usando la api. el 23 may. 2021 a las 4:41
  • Okey muchas gracias amigos la verdad es que entonces el problema era mio, yo pensaba que en cuando consumías una API, los datos que visualizabas en el DOM vaya(en este caso), los podías eliminar con la operación de DELETE, a lo cual me surge la duda en que casos podría utilizarse ese método, me imagino que mi API tendría que estar corriendo de manera local el 23 may. 2021 a las 4:55

1 respuesta 1

1

Lo que mencionas en comentarios:

yo pensaba que en cuando consumías una API, los datos que visualizabas en el DOM vaya(en este caso), los podías eliminar con la operación de DELETE

La API trabaja en un servidor, totalmente independiente de tu proyecto, "no se entera" de lo que tienes en el DOM y tampoco cambia el comportamiento por usar async - await que, de hecho, te recomiendo evitarlo en este caso, para simplificar el proceso, porque la API no devuelve un valor para saber si hubo éxito o no, por lo que debes analizar la propiedad ok de la respuesta para asumir que se eliminó el elemento.

Si la petición fue correcta, solo debes borrar la fila del DOM con .remove().

Por cierto, una forma más sencilla de obtener la fila es con .closest(), no importa que tantos ancestros tenga el botón, con un solo método llegas al padre.

//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.closest('tr');
    const id = fila.firstElementChild.textContent

    alertify.confirm('Mensaje lorem',
        function () {
            fetch(url + id, {
                method: 'DELETE'
            })
            .then(res => {
                // Analizar si la petición fue correcta
                if(res.ok) {
                    return res.json();
                }
                // Hubo error, lanzar excepción
                throw 'Error en petición';
            })
            .then(response => {
                // Eliminar fila del DOM
                fila.remove();
            })
            .catch(error => {
                // La petición falló
                console.log('Error: ' + error);
            });
        },
        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>

1
  • Muchas Gracias Triby por aclarar mi duda y mejorar mi código con tu explicación ahora me dejas mas claro el funcionamiento de una API y sus métodos. el 23 may. 2021 a las 17:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.