canchas.js

$(document).ready(function(){
    getCanchas();
});

function getCanchas() {
    $.ajax({
        url: "/api/",
        success: function (canchas) {
            // result = [{"nombre":"cuarta amarilla","direccion":"av calchaqui 3240","id":1},{"nombre":"la roca","direccion":"av irigoyen 23","id":3},{"nombre":"complejo SOS","direccion":"av calchaqui 3460","id":5},{"nombre":"sol de bosques","direccion":"ruta nacional 2 km 56","id":9},{"nombre":"stadio","direccion":"av san martin 3360","id":18},{"nombre":"planeta futbol","direccion":"miguel cane 330","id":24},{"nombre":"Cancha 5","direccion":"Francia 2622","id":25}];
            canchas.forEach(function (cancha) {
                // row = {"nombre":"cuarta amarilla","direccion":"av calchaqui 3240","id":1};
                agregarFila(cancha);
            });
        }
    });
}

function agregarFila(cancha) {
    // esta función, recibe la row, es decir, {"nombre":"cuarta amarilla","direccion":"av calchaqui 3240","id":1}
    var fila = getFilaDeCancha(cancha);
    $("#tabla-canchas").append(fila);
}

function getFilaDeCancha(cancha) {
    // lo importante acá, es que el id de cada fila, va a ser el id de la cancha. Así la podemos manipular después.
    return "<tr id='" + cancha.id + "'>" +
                "<td class='cancha-id'>" + cancha.id + "</td>" +
                "<td class='cancha-nombre'>" + cancha.nombre + "</td>" +
                "<td class='cancha-direccion'>" + cancha.direccion + "</td>" +
            "</tr>";
}

function templateBotonesDeAccion(id) {
    return "<td>" +
            "<span class='glyphicon glyphicon-trash' onclick=borrarCancha(" + id + ")></span>" +
            "<span class='glyphicon glyphicon-pencil' onclick=editarCancha(" + id + ")></span>" +
        "</td>";
}

function editarCancha(id){
    // Primero obtenemos la fila que queremos editar por el id.
    var fila = $("#" + id);

    // Dentro de la fila, buscamos por el nombre de la cancha, por la clase, y agarramos el texto.
    var nombre = fila.find(".cancha-nombre").text();
    var direccion = fila.find(".cancha-direccion").text();

    $("#nombre").val(nombre);
    $("#direccion").val(nombre);

    $("#cancha-modal").modal("show");
}

function guardarCancha() {
    var cancha = {
        nombre: $("#nombre").val(),
        direccion: $("#direccion").val(),
        id: $("#id").val()
    };

    $.ajax({
        url: "/api/cancha",
        type: "PUT",
        data: cancha,
        success: function (resultado) {
            limpiarFormulario();

            // Llamamos a getCanchas para que nos refresque el listado de canchas (podrías hacerte el pija y actualizar la fila así no hace un request)
            getCanchas();

            // cerramos el modal
            $("#canchas-modal").modal("hide");
        }
    });
}

function limpiarFormulario() {
    // limpiamos cada input del formulario
    $("#nombre").val("");
    $("#direccion").val("");
    $("#id").val("");
}

function crearCancha() {
    // armamos un objeto con los valores requeridos por la api, levantando los valores de los inputs del modal.
    var cancha = {
        nombre: $("#nombre").val(),
        direccion: $("#direccion").val()
    };

    $.ajax({
        url: "/api/cancha",
        type: "POST",
        data: cancha,
        success: function (resultado) {
            // se supone que el resultado, debería ser el id de la cancha creada.
            cancha.id = resultado;

            // agregamos la cancha que recién creamos
            agregarFila(cancha);

            limpiarFormulario();

            // cerramos el modal
            $("#canchas-modal").modal("hide");
        }
    });
}

function borrarCancha(id) {
    // es una llamada ajax pedorra.
    $.ajax({
        url: "/api/cancha/" + id,
        type: "DELETE",
        success: function (result) {
            // Si la llamada fue exitosa, borro la fila entera con el método remove.
            $("#" + id).remove();
        }
    });
}