1

Tengo la siguiente tabla en HTML


 <table border="1">
  <tr>
    <th>Nº</th>
    <th>NOMBRE</th>
    <th>AREA</th>
  </tr>
  <tbody id="curso">

    <tr>
        <td>1</td>
        <td>Jose</td>
        <td>Gramática</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Luis</td>
        <td>Gramática</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Andrea</td>
        <td>Idiomas</td>
    </tr>


  </tbody>
</table>

<p id="Cantidad"></p>

</body>

Este código puede contar la cantidad de filas utilizando un criterio en el campo AREA:

<script>

function ContarFila() {

var cantidadFilas = document.getElementById("curso").rows.length;
 
  let resultados = {};
  let elementos = document.querySelectorAll(
    "table tbody tr > td:nth-child(3)"
  );

  elementos.forEach(elemento => {
    if (resultados.hasOwnProperty(elemento.innerText)) {
      resultados[elemento.innerText]++;
    } else {
      resultados[elemento.innerText] = 1;
    }
  });

  console.log(resultados);
  for (let indice in resultados) {
    document.getElementById("Cantidad").innerHTML =
      resultados['Gramática'];
  };
}

window.onload=ContarFila();

</script>

Al recargar la página, utilizando el criterio 'Gramática' el resultado se muestra perfectamente, sin embargo, cuando intento incluir un criterio que aún no existe en el mismo campo, el resultado muestra UNDEFINED

¿Cómo puedo hacer para que en lugar de UNDEFINED muestre el resultado de CERO?

Gracias!

2 respuestas 2

1

Uso del OR (||) puede prevenir que aparezcan valores como false, null o undefined en el resultado.

Simplemente añade || 0 al término de este línea

document.getElementById("Cantidad").innerHTML = resultados['Gramática'] || 0;
6
  • Ambos funcionan de forma correcta, muchas gracias.
    – LuisJose
    el 30 dic. 2021 a las 4:13
  • 2
    El for no es necesario, por eso agregué un op. ternario, pero la solución del camarada también está perfecta, solo quita el for, es código que sobra. Siempre es bueno poder ayudar, quedo a las órdenes. el 30 dic. 2021 a las 5:07
  • Mil disculpas ... ¿Cómo incluir DOS CRITERIOS en ese mismo código?
    – LuisJose
    el 31 dic. 2021 a las 23:14
  • 1
    @LuisJose solo dijo que el bucle for no es necesario, no estoy seguro de lo que quieres decir con dos criterios
    – skara9
    el 1 ene. 2022 a las 1:51
  • Por ejemplo, si en el campo 'NOMBRE' de la tabla tendria 2 registros con valor "Andrea" y en el campo 'ÁREA' 2 registros de la materia "Idiomas" ... el resultado tendria que ser 2, es decir, que el contador muestre la cantidad de filas que cumplan con dos condiciones de los campos NOMBRE y ÁREA.
    – LuisJose
    el 1 ene. 2022 a las 2:35
1

Podrías hacer algo así en tu script:

function ContarFila() {
  var cantidadFilas = document.getElementById("curso").rows.length;

  let resultados = {};
  let elementos = document.querySelectorAll("table tbody tr > td:nth-child(3)");

  elementos.forEach((elemento) => {
    if (resultados.hasOwnProperty(elemento.innerText)) {
      resultados[elemento.innerText]++;
    } else {
      resultados[elemento.innerText] = 1;
    }
  });

  console.log(resultados);

Cambié de aquí para abajo

  const cantidadContainer = document.getElementById("Cantidad");

  const filtro = "Caca";

  filtro in resultados
    ? (cantidadContainer.innerHTML = resultados[filtro])
    : (cantidadContainer.innerHTML = 0);
}

window.onload = ContarFila();
0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.