es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Existe una forma de filtrar datos de jinja2 utilizando javascript?

15 Jul, 2023 Programación

Simplemente tengo datos que provienen de jinja2. Quiero filtrar los datos cuando hago clic en el botón. Otra solución podría ser pasar los datos a una variable de JavaScript.

He creado un ejemplo para una definición más clara. En este caso, quiero eliminar los números que son menores a 5. Luego los listo en HTML.

En la plantilla:

{% set data = [1,2, 3, 4, 5, 6, 7, 8, 9] %}

<ul> 
  {% for item in data %}
    <li>{{ item }}</li>
  {% endfor %}
</ul>

<button class="btn">Filtrar Datos</button>

En el script:

const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {
// filtrar aquí
}
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para filtrar los datos en javascript cuando se hace clic en el botón, se puede agregar un event listener al botón utilizando el método addEventListener. Dentro de la función del event listener, se puede utilizar el método filter para crear un nuevo array que contenga solo los números mayores o iguales a 5, basado en la condición especificada. Luego, se puede utilizar este nuevo array para actualizar el HTML.

    Aquí tienes un ejemplo de código:

    const btn = document.querySelector('.btn');
const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const list = document.querySelector('ul');

btn.addEventListener('click', () => {
  const filteredData = data.filter(num => num >= 5);
  list.innerHTML = filteredData.map(num => `<li>${num}</li>`).join('');
});

    En este ejemplo, primero definimos el array data fuera del event listener para que sea accesible dentro del mismo. Luego, utilizamos el método querySelector para seleccionar el elemento ul donde queremos mostrar los datos filtrados.

    Dentro del event listener, creamos un nuevo array llamado filteredData utilizando el método filter en el array data. El método filter toma una función que prueba cada elemento del array y devuelve un nuevo array que contiene solo los elementos que pasan la prueba. En este caso, utilizamos una función de flecha para probar si cada número es mayor o igual a 5.

    Luego, actualizamos el HTML estableciendo la propiedad innerHTML del elemento list a un string que contiene el marcado HTML para los datos filtrados. Utilizamos el método map para iterar sobre cada número en el array filteredData y devolver un string que represente un elemento li con el número adentro. Luego, utilizamos el método join para concatenar todos los elementos de string en un solo string sin ningún delimitador, para que pueda asignarse a la propiedad innerHTML.

Comments are closed.