1

Recorro el contenido de una tabla con su ID y usando el método "MAP", procedimiento consiste en que en el recorrido específicamente en una columna se encuentra un valor a la cual le estoy haciendo una validación con la que dice que si es "0" me retorne "false", pero parece que la ejecución de mi JS no esta esperando que termine el loop por que salta al siguiente código que es el retorno de "true".

const validateColletSale = () => {
  $("#lista_producto tbody tr").map((k, e) => {
    let dataCells = [].slice.call(e.cells);
    const stockActual = parseInt(dataCells[4].firstChild.dataset.stockActual);
    if(stockActual == 0){
      return false;
    }
  });
  return true;
}
console.log(validateColletSale())
if(!validateColletSale()){
  console.log(validateColletSale())
}
console.log('paso')

const validateColletSale = () => {
  $("#lista_producto tbody tr").map((k, e) => {
    let dataCells = [].slice.call(e.cells);
    const stockActual = parseInt(dataCells[4].firstChild.dataset.stockActual);
    if(stockActual == 0){
      return false;
    }
  });
  return true;
}
console.log(validateColletSale())
if(!validateColletSale()){
  console.log(validateColletSale())
}
console.log('paso') 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="lista_producto" class="table table-hover table-striped _table _table_punto_venta dataTable no-footer" style="width: 100%;" role="grid" aria-describedby="lista_producto_info">
                <thead>
                    <tr class="bg-info text-white" role="row"><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 9px;">#</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 72px;">Código</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 66px;">Producto</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 46px;">Unidad</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 60px;">Cantidad</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 44px;">Precio</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 51px;">Importe</th><th class="sorting_disabled" rowspan="1" colspan="1" style="width: 68px;">Acción</th><th style="display: none; width: 0px;" class="sorting_disabled" rowspan="1" colspan="1">Tipo afectación</th></tr>
                </thead>
                <tbody><tr role="row" class="odd"><td>1</td><td>PRO000002</td><td>producto 2 magdalena</td><td>NIU</td><td><input type="text" id="cantidad_1" class="form-control text-right" onkeypress="calcImporte(1);return isNumberKey(this, event)" value="1" maxlength="12" data-stock-actual="9"></td><td><input type="text" id="precio_1" class="form-control text-right" onkeypress="calcImporte(1);return isNumberKey(this, event)" value="20" maxlength="12"></td><td><div class="text-right">S/.<span id="importe_1" class="impoteTotal">20.00</span></div></td><td><button type="button" onclick="deleteRow(this)" class="btn btn-danger btn-sm">Eliminar</button></td><td><input type="hidden" id="tipo_afectacion_1" class="form-control text-right" value="1" readonly=""></td></tr><tr role="row" class="even"><td>2</td><td>PRO000001</td><td>producto magdalena</td><td>NIU</td><td><input type="text" id="cantidad_2" class="form-control text-right" onkeypress="calcImporte(2);return isNumberKey(this, event)" value="1" maxlength="12" data-stock-actual="12"></td><td><input type="text" id="precio_2" class="form-control text-right" onkeypress="calcImporte(2);return isNumberKey(this, event)" value="15" maxlength="12"></td><td><div class="text-right">S/.<span id="importe_2" class="impoteTotal">15.00</span></div></td><td><button type="button" onclick="deleteRow(this)" class="btn btn-danger btn-sm">Eliminar</button></td><td><input type="hidden" id="tipo_afectacion_2" class="form-control text-right" value="1" readonly=""></td></tr><tr role="row" class="odd" style="background-color: rgb(255, 152, 153);"><td>3</td><td>PRO000003</td><td>producto 3 magdalena</td><td>NIU</td><td><input type="text" id="cantidad_3" class="form-control text-right" onkeypress="calcImporte(3);return isNumberKey(this, event)" value="1" maxlength="12" data-stock-actual="0"></td><td><input type="text" id="precio_3" class="form-control text-right" onkeypress="calcImporte(3);return isNumberKey(this, event)" value="30" maxlength="12"></td><td><div class="text-right">S/.<span id="importe_3" class="impoteTotal">30.00</span></div></td><td><button type="button" onclick="deleteRow(this)" class="btn btn-danger btn-sm">Eliminar</button></td><td><input type="hidden" id="tipo_afectacion_3" class="form-control text-right" value="1" readonly=""></td></tr></tbody>
            </table>

0

1 respuesta 1

1

Estás confundiendo el scope sobre el que trabaja map, cuando haces el return dentro del mismo no estás haciendo un return para la función validateColletSale , si no que estás haciendo un return para devolver un array a partir de map.

Una posible solución para lo que tratas de hacer es:

const validateColletSale = () => {
  let toReturn = true;
  $("#lista_producto tbody tr").map((k, e) => {
    let dataCells = [].slice.call(e.cells);
    const stockActual = parseInt(dataCells[4].firstChild.dataset.stockActual);
    if(stockActual == 0){
      toReturn = false;
    }
  });
  return toReturn;
}
console.log(validateColletSale())
if(!validateColletSale()){
  console.log(validateColletSale())
}
console.log('paso')

Entiendo que hay mejores soluciones desde el punto de vista de tú código y su funcionalidad, sin embargo, te dejo esta con el fin de que entiendas que es lo que está sucediendo con tu código lo cuál creo que es más valioso.

También te dejo este ejemplo escrito de una manera muy sencilla, para que analices en él dos cosas:

  1. El return dentro de map no funciona para la función padre, que en este caso es prueba, funciona dentro del scope del método map.
  2. Cuándo usas map lo que devuelves con return se va a ir guardando en un array el cuál finalmente después de recorrer todo el array se devuelve al usar el método map. Esto es útil para transformar arrays o crear nuevos arrays a partir de otros.

const miArray = [0,1,2,3,4];

function prueba(){
  let nuevoArray = miArray.map( elemento =>{
    if(elemento >=2){
    return true;}
    else{
    return false}
  });
  console.log("El array que genero con map es: ", nuevoArray);
  return true;
}

console.log("El resultado de prueba(que siempre es true):",prueba(miArray));

También si quieres utilizar return de la manera en que creo que querías con tu código original puedes utilizar un for para recorrer tu objeto iterable:

const miArray1 = [0, 1, 3, 2, 4];
const miArray2 = [0, 1, 8, 2, 9];

function menorQueCinco(inputArray) {
  for (elemento of inputArray) {
    console.log(`Analizando si ${elemento} es mayor que 5...`);
    if (elemento > 5) {
      console.log("Número mayor que 5. Interrumpiendo iteración sobre el array y saliendo de la función con return.");
      return false;
    }
  }
  return true;
}

console.log(menorQueCinco(miArray1));
console.log(menorQueCinco(miArray2));

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.