0

Estoy buscando eliminar un elemento de un array cuando presiono un boton y que luego se vea reflejado en una tabla que tengo creada.

Mi codigo html es el siguiente:

<div id="SolicitudesPendientes">
    <h3>Solicitudes pendientes</h3>
    <table border="1" id="tablaSolicitudesPendientes"></table>
</div>

Mi codigo js es el siguiente:

let contadorDeSolicitudes=0

class Solicitud{ 
    constructor (unTipoMercaderia,unaDescripcion,unPuertoOrigen,unaCantidadContenedores,unEstado){

        this.id=contadorDeSolicitudes
        this.tipoMercaderia=unTipoMercaderia
        this.descripcion= unaDescripcion
        this.puertoOrigen= unPuertoOrigen
        this.cantidadContenedores= unaCantidadContenedores
        this.estado=unEstado
        contadorDeSolicitudes++
    }
}


function listarSolicitudesPendientes(){
    let tabla = document.querySelector("#tablaSolicitudesPendientes");
    let tablaHTML = "<tr><td>Tipo de mercancia</td><td>Puerto de origen</td><td>Cantidad de contenedores</td><td>Descripcion</td><td>Id de solicitud</td><td>Cancelar</td></tr>";
    for(let solicitud of listaSolicitudes){
        tablaHTML += `<tr>
                      <td>${solicitud.tipoMercaderia}</td>
                      <td>${solicitud.puertoOrigen}</td>
                      <td>${solicitud.cantidadContenedores}</td>
                      <td>${solicitud.descripcion}</td>
                      <td>${solicitud.id}</td>
                      <td><input type="button" value="Cancelar" onClick=cancelarSolicitud(${solicitud.id}) ></td>
                      </tr>
        `
    }

    tabla.innerHTML = tablaHTML;
}

function cancelarSolicitud(unId){
    for (let solicitud of listaSolicitudes){
        if(solicitud.id == unId){
            listaSolicitudes.splice(unId)
            listarSolicitudesPendientes()
        } 
    }
}

let listaSolicitudes=[]

function agregarSolicitud 
(unTipoMercaderia,unaDescripcion,unPuertoOrigen,unaCantidadContenedores,unEstado){
    let unaSolicitud = new Solicitud(unTipoMercaderia,unaDescripcion,unPuertoOrigen,unaCantidadContenedores,unEstado);
    listaSolicitudes.push(unaSolicitud);
}

function precargarDatos(){

    agregarSolicitud("CARGA_GENERAL","manzanas","BSA",8,"pendiente");
    agregarSolicitud("REFRIGERADO","carne","USA",3,"pendiente");
    agregarSolicitud("CARGA_PELIGROSA","ceramicas","BSA",20,"pendiente");
}

El problema que estoy encontrando es que si presiono el boton de cancelar el elemento con id 1 tambien se elimina el elemento con id 2 porque una vez que se elimina el id 1 el 2 pasa a tener id 1.

6
  • 2
    agrega tu html tambien Commented el 5 nov. 2022 a las 19:13
  • cómo ejecutas esas funciones? Commented el 5 nov. 2022 a las 19:25
  • tienes que agrear el segundo argumento a splice: listaSolicitudes.splice(unId,1). Además te recomiento que contadorDeSolicitudes lo pongas dentro de la clase como variable static y que agregues los puntos y comas ; donde te faltan
    – Yussef
    Commented el 5 nov. 2022 a las 19:40
  • @Yussef como agrego variables estaticas dentro de clases? Commented el 5 nov. 2022 a las 19:45
  • 1
    @ElFuturoLlego class Solicitud{ static contadorDeSolicitudes=0; constructor (...){ this.id=Solicitud.contadorDeSolicitudes; Solicitud.contadorDeSolicitudes++;
    – Yussef
    Commented el 5 nov. 2022 a las 19:49

2 respuestas 2

2

El problema esta en el uso del metodo Splice(). El primer valor es el indice desde donde comenzamos a cortar el array, y el segundo es cuantos elementos queremos borrar a partir de ese indice. Entonces el primer parametro lo obtenemos con Array.IndexOf() y el segundo es un 1 ya que queremos eliminar solo uno:

function cancelarSolicitud(unId){
    for (let solicitud of listaSolicitudes){
        if(solicitud.id == unId){
            listaSolicitudes.splice(listaSolicitudes.indexOf(solicitud),1)
            listarSolicitudesPendientes()
        } 
    }
}

creo que era lo unico que estaba mal, decime si te funciona.

2
  • Sí, funciona, je, me gusta más tu respuesta que la mia... me olvidé del indexOf y le puse un contador a pelo
    – masterguru
    Commented el 5 nov. 2022 a las 19:42
  • @masterguru jaja es normal! a mi tambien me pasa! saludos Commented el 5 nov. 2022 a las 19:42
2

Estás aplicando mal el método splice() de javascript.

Si te fijas en este ejemplo de su documentación verás que estás eliminando el contenido completo del array a partir del número de índice que le indicas.

listaSolicitudes.splice(unId)

Por otra parte, no deberías confundir los número de índice con los números de id que estás usando. No tienen porque corresponderse entre ellos.

Cambiando esta parte de tu código de este modo podría funcionarte bien:

function cancelarSolicitud(unId) {
  let contador_indices = 0
  for (let solicitud of listaSolicitudes) {
    if (solicitud.id == unId) {
      listaSolicitudes.splice(contador_indices, 1)
      listarSolicitudesPendientes()
      break;
    }
    contador_indices++;
  }
}

donde inicializamos una variable denominada contador_indices que irá representando el número de índice que estamos recorriendo en cada ciclo, y en el momento de querer eliminarla, lo hacemos correctamente poniendolo así:

listaSolicitudes.splice(contador_indices, 1)

para que solo elimine un elemento a partir de esa posición del array. Y luego, como ya hemos eliminado la coincidencia, salimos con break para que no siga con los ciclos y ahorrar algo de recursos.

Ejemplo completo:

var listaSolicitudes = [{
  tipoMercaderia: "CARGA_GENERAL",
  puertoOrigen: "Cartagena",
  cantidadContenedores: "3",
  descripcion: "Jabón de Marsella",
  id: "123"
},{
  tipoMercaderia: "CARGA_GENERAL",
  puertoOrigen: "Cartagena de las Indias",
  cantidadContenedores: "34",
  descripcion: "Jabón de Alicante",
  id: "125"
}]
let contadorDeSolicitudes = 0

class Solicitud {
  constructor(unTipoMercaderia, unaDescripcion, unPuertoOrigen, unaCantidadContenedores, unEstado) {

    this.id = contadorDeSolicitudes
    this.tipoMercaderia = unTipoMercaderia
    this.descripcion = unaDescripcion
    this.puertoOrigen = unPuertoOrigen
    this.cantidadContenedores = unaCantidadContenedores
    this.estado = unEstado
    contadorDeSolicitudes++
  }
}


function listarSolicitudesPendientes() {
  let tabla = document.querySelector("#tablaSolicitudesPendientes");
  let tablaHTML = ''
  tablaHTML += "<tr><td>Tipo de mercancia</td><td>Puerto de origen</td><td>Cantidad de contenedores</td><td>Descripcion</td><td>Id de solicitud</td><td>Cancelar</td></tr>";
  
  for (let solicitud of listaSolicitudes) {
    tablaHTML += `<tr>
                      <td>${solicitud.tipoMercaderia}</td>
                      <td>${solicitud.puertoOrigen}</td>
                      <td>${solicitud.cantidadContenedores}</td>
                      <td>${solicitud.descripcion}</td>
                      <td>${solicitud.id}</td>
                      <td><input type="button" value="Cancelar" onClick="cancelarSolicitud(${solicitud.id})" ></td>
                      </tr>
        `
  }

  tabla.innerHTML = tablaHTML;
}

function cancelarSolicitud(unId) {
  let contador_indices = 0
  for (let solicitud of listaSolicitudes) {
    if (solicitud.id == unId) {
      listaSolicitudes.splice(contador_indices, 1)
      listarSolicitudesPendientes()
      break;
    }
    contador_indices++;
  }
}

// let listaSolicitudes = []

function agregarSolicitud(unTipoMercaderia, unaDescripcion, unPuertoOrigen, unaCantidadContenedores, unEstado) {
  let unaSolicitud = new Solicitud(unTipoMercaderia, unaDescripcion, unPuertoOrigen, unaCantidadContenedores, unEstado);
  listaSolicitudes.push(unaSolicitud);
}

function precargarDatos() {

  agregarSolicitud("CARGA_GENERAL", "manzanas", "BSA", 8, "pendiente");
  agregarSolicitud("REFRIGERADO", "carne", "USA", 3, "pendiente");
  agregarSolicitud("CARGA_PELIGROSA", "ceramicas", "BSA", 20, "pendiente");
}

listarSolicitudesPendientes()
<div id="SolicitudesPendientes">
    <h3>Solicitudes pendientes</h3>
    <table border="1" id="tablaSolicitudesPendientes"></table>
</div>

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.