Boa tarde. Estava observando o código, e não consegui identificar de onde vem o valor da propriedade 'id' do objeto cliente gravado no db.json. No momento de criar o cliente, não há nenhum envio de informação referente ao 'id':
export const criaCliente = (nome, email) => {
return fetch(`http://localhost:3000/profile`, {
// Queremos enviar os dados 'nome' e 'email' para o servidor
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
nome: nome,
email: email,
})
})
.then(resposta => {
if (resposta.ok) {
return resposta.body;
}
throw new Error ("Não foi possível criar um cliente") // GET http://localhost:3000/profie 404 (Not Found)
})
}Perceba que somente são gravadas no servidor db.json as propriedades 'nome' e 'email'. Mas na hora de excluir, acessamos o cliente através da propriedade 'id', que está gravada no db.json:
"profile": [
{
"nome": "Carol",
"email": "carol@email.com",
"id": 3
},
{
"nome": "Bruno",
"email": "bruno@email.com",
"id": 4
},
{
"nome": "Rafael",
"email": "rafael@email.com",
"id": 5
},Como podemos excluir o cliente identificando-o através do id, se essa propriedade não foi criada no momento de cadastrar o cliente. De onde ela saiu?
tabela.addEventListener('click', async (evento) => {
// O alvo do evento é o botão de excluir, identificado pela class abaixo.
let ehBotaoDeletar = evento.target.className == 'botao-simples botao-simples--excluir'
if(ehBotaoDeletar) {
// Não é obrigatório usar try/catch.
try {
/* Para deletar a linha <tr> da table que mostra os dados do cliente, precisamos pegar
o elemento pai <tr> da <td> que contém o botão deletar clicado. */
const linhaCliente = evento.target.closest('[data-id]')
const id = linhaCliente.dataset.id
// Remover o cliente do servidor db.json.
// Utilizando 'async/await' não precisamos usar o método .then.
await removeCliente(id)
// Remover o elemento html <tr> que é a linha que contém o cliente.
linhaCliente.remove()
}
catch(erro) {
console.log(erro)
// Redireciona o usuário para uma página de aviso de erro.
window.location.href = '../telas/erro.html'
}
}
})
