Bueno estoy teniendo un problema con mi codigo. Al cargar el producto el json-server me devuleve un item vacio....todo venia bien hasta que agregué la parte de eliminar producto. ¿Como puedo solucionarlo? Gracias de antemano
const data = document.getElementById('products');
//Comienza una funcion anonima autoejecutable
(()=>{
fetch('http://localhost:3000/items')//direccion del archivo json, puede ser local o alojada en webs o servidores
.then((res)=>{
return res.ok ? res.json(): Promise.reject(res);//aqui retornamos el primer then siempre y cuando la respuesta sea status:ok, status:200 sino devolvemos la funcion rechazar desde la promesa
})
.then((json)=>{
json.forEach(elem => {//recorremos los elementos del archivo json
const div = document.createElement('div');
//usamos un template para inyectar contenido html + los elementos del json
div.innerHTML=`
<img src="${elem.img}"/>
<p>${elem.name}</p>
<p>$${elem.precio}</p>
<i title="Editar" class="fa-regular fa-pen-to-square tooltip"></i>
<i title="Eliminar" class="fa-regular fa-trash-can tooltip" id="${elem.id}"></i>
`;
data.appendChild(div);
div.classList.add("items");
const trash =div.querySelector('.fa-trash-can');
console.log(trash)
trash.addEventListener('click', ()=>{
const id = trash.id;
eliminarProducto(id)
.then((res)=>{
console.log(res)
})
.catch((err)=>{
const msg = err.statusText || " Ocurrio un error ";
if(err)
alert(`Error ${err.status}:${msg}`)
})
})
});
}).catch((err)=>{
const msg = err.statusText || " Ocurrio un error ";
if(err)
alert(`Error ${err.status}:${msg}`)
})
})();
const eliminarProducto = (id)=>{
return fetch(`http://localhost:3000/items/${id}`,{
method:'DELETE'
})
}var route = document.getElementById('img-url').value ;
var prodName = document.getElementById('name-prod').value ;
var prodPrice = document.getElementById('price-prod').value ;
//Funcion asincrona para conectarnos al json
const connectData = async()=>{
try{
const res = await fetch('../data/products.json')
const data = await res.json();
// console.log(data);
} catch (error){console.log(error)};
};
//Funcion para declarar el tipo de conexion que vamos a demandar al json
const crearProducto =(id,img,name,precio)=>{
return fetch('http://localhost:3000/items', {
method: 'POST',
mode:"cors",
headers:{
'Content-Type':'application/json'
},//usamos uuid.v4() para generar id´s dinamicamente sin nuestra intervencio
body:JSON.stringify({id:uuid.v4(),img:route,name:prodName,precio:prodPrice})//Muy importate el cuerpo del contenido que vamos a iterar, un formato incorrecto terminara con items de con otro formato al insertear un nuevo producto en la base de datos...en esta caso products.json
})
}
const form = document.querySelector('#form-add');
//Comieza el evnto que va tomar los calores de los inputs del form para crear un nuevo producto
form.addEventListener('submit',(e)=>{
e.preventDefault();
const agregando = {img:route,name:prodName,precio:prodPrice}//coincidiendo con el cuerpo (body) de la requisitoria del json....definimos sus contenidos
crearProducto(agregando).then((res)=>{//una vez que creamos el producto adicionamos un .then para no dejar en el aire la Promise que devuelve el fetch.Entonces así comprobamos que nos devuelva un status 201 o Created y redirigioms al usuario a una pagina determinada
console.log(res.status)
if(res.status===201){
window.location.href='index.html'//aqui redirijimos al usuario, siempre y cuando la respuesta del servidor sea === identica a 201 Created
}
}).catch((err)=>{
const msg = err.statusText || " Ocurrio un error ";
if(err)
alert(`Error ${err.status}:${msg}`)
});
});
{
"id": "1dfe206a-d587-43e2-8663-295f43dd470b",
"img": "",
"name": "",
"precio": ""
}