script.js

const URL_BASE = "https://contactc.herokuapp.com/contacts";
let data = null;
let insert = true;

$(() => {
    loadData()

    $('.btnDelete').on("click", () => console.log(00))

    $('#btnSave').click(() => {
        createData()
    })
    
})

loadData = () => {
    axios.get(URL_BASE)
        .then((d) => {
            data = d.data._embedded.contacts
            listData()
        }).catch(err => {
            data = []
        })
}

listData = () => {
    $("#tblList").html("");
    $("#tblList").html(
            "<thead>" +
            "<tr>" +                
            "<th>ID</th>" +
            "<th>Nome</th>" +
            "<th>Telefone</th>" +
            "<th>E-mail</th>" +
            "<th>Gênero</th>" +
            "<th>Aniversário</th>" +
            "<th>Ações</th>" +
            "</tr>" +
            "</thead>" +
            "<tbody>" +
            "</tbody>"
            ); //Agregar la tabla a la estructura HTML
    for (let d of data) {
        const ID = d._links.contact.href.split('/').reverse()[0]
        $("#tblList tbody").append("<tr>" +                    
                "<td>" + ID + "</td>" +
                "<td>" + (d.name ? d.name : '') + "</td>" +
                "<td>" + (d.phone ? d.phone : '')  + "</td>" +
                "<td>" + (d.email ? d.email : '') + "</td>" +  
                "<td>" + (d.gender ? d.gender : '')  + "</td>" +
                "<td>" + (d.birthday ? d.birthday : '') + "</td>" +
                "<td><img src='edit.png' alt='Edit " + ID + " class='btnEdit'/>&nbsp &nbsp<img src='delete.png' alt='Delete" + ID + " 'class='btnDelete'/></td>" +
                "</tr>"
                );
    } //Recorrer y agregar los items a la tabla HTML
}

createData = () => {
    var person = {
      "name": $("#name").val(),
      "phone": $("#phone").val(),
      "email": $("#email").val(),
      "gender": $("#gender").val() ? $("#gender").val() : null,
      "birthday": $("#birthday").val()
    }; 
    console.log('per', person)
    // document.getElementById('frmPerson').reset()
    axios.post(URL_BASE, person, {
        headers: { 
            'Content-Type': 'application/json;charset=UTF-8',
            "Access-Control-Allow-Origin": "*",
        }
    })
    .then((r) => {console.log(r); location.reload()})
    .catch((e) => console.error(e))
}

deleteData = (id) => {
    axios.delete(`${URL_BASE}/id`)
    .then(r => console.log(r))
    .catch(e => console.log(e))
}

editData = (id, data) => {
    axios.put(`${URL_BASE}/id`, data, {
        headers: { 
            'Content-Type': 'application/json;charset=UTF-8',
            "Access-Control-Allow-Origin": "*"
        }
    })
    .then(r => console.log(r))
    .catch(e => console.log(e))
}