Pedro
Reputation: 9
Can't get the function to filter the results
I'm trying to make an hospital patients log with filters. I'm trying to do a filter by age and a filter by disease. But I can't make the filters work. I made this code but I can't see where the mistake is. The console log doesn't show errors but when I change the filter parameters and click search it doesn't work.
const pacientes = new Array(
{
nombre: "Luis",
apellido: "Ramirez",
edad: 27,
diagnostico: "gripe",
numeroSS: "A12340"
},
{
nombre: "Pablo",
apellido: "Perez",
edad: 17,
diagnostico: "torcedura",
numeroSS: "A22345"
},
{
nombre: "Antonio",
apellido: "Ruiz",
edad: 14,
diagnostico: "conjuntivitis",
numeroSS: "A32345"
},
{
nombre: "Pedro",
apellido: "Perez",
edad: 37,
diagnostico: "torcedura",
numeroSS: "A42310"
},
{
nombre: "Juan Luis",
apellido: "Valera",
edad: 36,
diagnostico: "tuberculosis",
numeroSS: "A52345"
},
{
nombre: "Domingo",
apellido: "Córcoles",
edad: 40,
diagnostico: "asma",
numeroSS: "A62345"
},
{
nombre: "Luis Alberto",
apellido: "García",
edad: 41,
diagnostico: "conjuntivitis",
numeroSS: "A72345"
},
{
nombre: "Juan",
apellido: "Martínez",
edad: 22,
diagnostico: "gripe",
numeroSS: "A82360"
},
{
nombre: "Juan",
apellido: "Bernal",
edad: 25,
diagnostico: "asma",
numeroSS: "A92347"
},
{
nombre: "Jose María",
apellido: "Spiteri",
edad: 39,
diagnostico: "obesidad morbida",
numeroSS: "A10346"
},
{
nombre: "Angel",
apellido: "García",
edad: 37,
diagnostico: "gripe",
numeroSS: "A11345"
},
{
nombre: "Bernardo",
apellido: "Gonzalez",
edad: 55,
diagnostico: "faringitis",
numeroSS: "A12240"
},
{
nombre: "Pascual",
apellido: "Verdú",
edad: 33,
diagnostico: "arritmia ventricular",
numeroSS: "A13347"
},
{
nombre: "Fernando",
apellido: "Calderón",
edad: 48,
diagnostico: "hepatitis",
numeroSS: "A14345"
},
{
nombre: "Agustín",
apellido: "Carrión",
edad: 19,
diagnostico: "gripe",
numeroSS: "A15347"
},
{
nombre: "Arde",
apellido: "a Secas",
edad: 30,
diagnostico: "gonorrea",
numeroSS: "A5432"
},
{
nombre: "Pedro",
apellido: "Martinez",
edad: 37,
diagnostico: "covid19",
numeroSS: "A45678"
},
);
function filtrarXEdad(pListaPacientes, pEdadMinima, pEdadMaxima) {
const listaFiltrada = pListaPacientes.filter(paciente => {
return paciente.edad >= pEdadMinima && paciente.edad <= pEdadMaxima
});
return listaFiltrada;
}
function filtrarXdiagnostico(pListaPacientes, pDiagnostico) {
const listaFiltrada = pListaPacientes.filter(paciente => {
return paciente.diagnostico.toLowerCase() == pDiagnostico.toLowerCase();
})
return listaFiltrada
}
const boton1 = document.querySelector('#botonEdad')
const edadMinima = document.querySelector('#edadMin')
const edadMax = document.querySelector('#edadMaxima')
const botonDiag = document.querySelector('#diagnostico')
boton1.addEventListener('click', filtroEdad);
function filtroEdad(event) {
event.preventDefault();
alert('filtro edad funcionando');
}
function pintarPacientes(pListaPacientes) {
pListaPacientes.forEach(paciente => pintarPaciente(paciente));
}
function pintarPaciente(pPaciente) {
let li = document.createElement('li');
let nombrePaciente = document.createTextNode(pPaciente.nombre + " ")
let apellidopaciente = document.createTextNode(pPaciente.apellido + " ")
let edadPaciente = document.createTextNode(pPaciente.edad)
let diagnosticoPaciente = document.createTextNode(pPaciente.diagnostico)
li.appendChild(nombrePaciente)
li.appendChild(apellidopaciente)
li.appendChild(edadPaciente)
li.appendChild(diagnosticoPaciente)
}
botonDiag.addEventListener('change', filtroDiagnostico);
function filtroDiagnostico(event) {
event.preventDefault();
alert('filtro funcionando con change')
}<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital la princesa</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/lista.js"></script>
</head>
<body>
<header>
<div class="container">
<!-- Aqui estarán los filtros -->
<div>
<h5>filtro por edad</h5>
<!-- filtro de edad -->
<form action="">
<select id="edadMin">
<option value="">Seleccion edad minima</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
<select id="edadMaxima">
<!-- option[value="$"]{$}*100 -->
<option value="">Seleccion edad máxima</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
<input type="submit" id="botonEdad" value="Filtrar por edad">
</form>
</div>
<br>
<hr>
<br>
<div>
<!-- filtro diagnostico -->
<select id="diagnostico">
<option value="">Seleccion un diagnostico</option>
<option value="Diabetes">Diabetes</option>
<option value="Anorexia">Anorexia</option>
<option value="Coronavirus">Coronavirus</option>
<option value="Diarrea">Diarrea</option>
<option value="Gripe">Gripe</option>
</select>
</div>
<br>
<hr>
<br>
<div>
<form action="">
<!-- superfiltro -->
<select id="edadMin2">
<option value="">Seleccion edad minima</option>
</select>
<select id="edadMaxima2">
<!-- option[value="$"]{$}*100 -->
<option value="">Seleccion edad máxima</option>
</select>
<select id="diagnostico2">
<option value="">Seleccion un diagnostico</option>
<option value="Diabetes">Diabetes</option>
<option value="Anorexia">Anorexia</option>
<option value="Coronavirus">Coronavirus</option>
<option value="Diarrea">Diarrea</option>
<option value="Gripe">Gripe</option>
</select>
<input type="submit" id="superboton" value="superfiltro">
</form>
</div>
<br>
<hr>
<br>
<div>
<input type="text" id="pacienteNombre" placeholder="Buscar paciente por nombre">
<button id="buscar">BUSCAR PACIENTE</button>
</div>
</div>
</header>
<main>
<h2 id="numeropacientes"></h2>
<section id="pacientes">
<!-- <article>
<h3>Nombre y apellido</h3>
<ul>
<li>EDAD: 38</li>
<li>NUMERO SEGURIDAD SOCIAL: A456789</li>
</ul>
<div class="diagnostico">
Coronavirus
</div>
</article> -->
</section>
</main>
<script src="js/funciones.js"></script>
<script src="js/eventos.js"></script>
</body>
</html>Upvotes: 0
Views: 88
Answers (2)
Eduardo Coltri
Reputation: 506
As @Kidas pointed out, there is a mistake on a line of the code.
But also, you are not selecting the values of your select component.
For example, you can do it using the following code
const edadMinima = parseInt(document.querySelector('#edadMin').value)
const edadMax = parseInt(document.querySelector('#edadMaxima').value)
Here we get the current selected value, and change it to int. The conversion was made because your pacients have the edad value as int.
Below there is a full example implemented on the filtroEdad function.
const pacientes = new Array(
{
nombre: "Luis",
apellido: "Ramirez",
edad: 27,
diagnostico: "gripe",
numeroSS: "A12340"
},
{
nombre: "Pablo",
apellido: "Perez",
edad: 17,
diagnostico: "torcedura",
numeroSS: "A22345"
},
{
nombre: "Antonio",
apellido: "Ruiz",
edad: 14,
diagnostico: "conjuntivitis",
numeroSS: "A32345"
},
{
nombre: "Pedro",
apellido: "Perez",
edad: 37,
diagnostico: "torcedura",
numeroSS: "A42310"
},
{
nombre: "Juan Luis",
apellido: "Valera",
edad: 36,
diagnostico: "tuberculosis",
numeroSS: "A52345"
},
{
nombre: "Domingo",
apellido: "Córcoles",
edad: 40,
diagnostico: "asma",
numeroSS: "A62345"
},
{
nombre: "Luis Alberto",
apellido: "García",
edad: 41,
diagnostico: "conjuntivitis",
numeroSS: "A72345"
},
{
nombre: "Juan",
apellido: "Martínez",
edad: 22,
diagnostico: "gripe",
numeroSS: "A82360"
},
{
nombre: "Juan",
apellido: "Bernal",
edad: 25,
diagnostico: "asma",
numeroSS: "A92347"
},
{
nombre: "Jose María",
apellido: "Spiteri",
edad: 39,
diagnostico: "obesidad morbida",
numeroSS: "A10346"
},
{
nombre: "Angel",
apellido: "García",
edad: 37,
diagnostico: "gripe",
numeroSS: "A11345"
},
{
nombre: "Bernardo",
apellido: "Gonzalez",
edad: 55,
diagnostico: "faringitis",
numeroSS: "A12240"
},
{
nombre: "Pascual",
apellido: "Verdú",
edad: 33,
diagnostico: "arritmia ventricular",
numeroSS: "A13347"
},
{
nombre: "Fernando",
apellido: "Calderón",
edad: 48,
diagnostico: "hepatitis",
numeroSS: "A14345"
},
{
nombre: "Agustín",
apellido: "Carrión",
edad: 19,
diagnostico: "gripe",
numeroSS: "A15347"
},
{
nombre: "Arde",
apellido: "a Secas",
edad: 30,
diagnostico: "gonorrea",
numeroSS: "A5432"
},
{
nombre: "Pedro",
apellido: "Martinez",
edad: 37,
diagnostico: "covid19",
numeroSS: "A45678"
},
);
function filtrarXEdad(pListaPacientes, pEdadMinima, pEdadMaxima) {
const listaFiltrada = pListaPacientes.filter(paciente => {
return paciente.edad >= pEdadMinima && paciente.edad <= pEdadMaxima
});
return listaFiltrada;
}
function filtroEdad(event) {
event.preventDefault();
const edadMinima = parseInt(document.querySelector('#edadMin').value)
const edadMax = parseInt(document.querySelector('#edadMaxima').value)
let filtered = filtrarXEdad(pacientes,edadMinima,edadMax)
console.log(filtered)
alert('filtro edad funcionando');
}
const boton1 = document.querySelector('#botonEdad')
boton1.addEventListener('click', filtroEdad);<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hospital la princesa</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/lista.js"></script>
</head>
<body>
<header>
<div class="container">
<!-- Aqui estarán los filtros -->
<div>
<h5>filtro por edad</h5>
<!-- filtro de edad -->
<form action="">
<select id="edadMin">
<option value="">Seleccion edad minima</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
<select id="edadMaxima">
<!-- option[value="$"]{$}*100 -->
<option value="">Seleccion edad máxima</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
<option value="60">60</option>
<option value="61">61</option>
<option value="62">62</option>
<option value="63">63</option>
<option value="64">64</option>
<option value="65">65</option>
<option value="66">66</option>
<option value="67">67</option>
<option value="68">68</option>
<option value="69">69</option>
<option value="70">70</option>
<option value="71">71</option>
<option value="72">72</option>
<option value="73">73</option>
<option value="74">74</option>
<option value="75">75</option>
<option value="76">76</option>
<option value="77">77</option>
<option value="78">78</option>
<option value="79">79</option>
<option value="80">80</option>
<option value="81">81</option>
<option value="82">82</option>
<option value="83">83</option>
<option value="84">84</option>
<option value="85">85</option>
<option value="86">86</option>
<option value="87">87</option>
<option value="88">88</option>
<option value="89">89</option>
<option value="90">90</option>
<option value="91">91</option>
<option value="92">92</option>
<option value="93">93</option>
<option value="94">94</option>
<option value="95">95</option>
<option value="96">96</option>
<option value="97">97</option>
<option value="98">98</option>
<option value="99">99</option>
<option value="100">100</option>
</select>
<input type="submit" id="botonEdad" value="Filtrar por edad">
</form>
</div>
<br>
<hr>
<br>
<div>
<!-- filtro diagnostico -->
<select id="diagnostico">
<option value="">Seleccion un diagnostico</option>
<option value="Diabetes">Diabetes</option>
<option value="Anorexia">Anorexia</option>
<option value="Coronavirus">Coronavirus</option>
<option value="Diarrea">Diarrea</option>
<option value="Gripe">Gripe</option>
</select>
</div>
<br>
<hr>
<br>
<div>
<form action="">
<!-- superfiltro -->
<select id="edadMin2">
<option value="">Seleccion edad minima</option>
</select>
<select id="edadMaxima2">
<!-- option[value="$"]{$}*100 -->
<option value="">Seleccion edad máxima</option>
</select>
<select id="diagnostico2">
<option value="">Seleccion un diagnostico</option>
<option value="Diabetes">Diabetes</option>
<option value="Anorexia">Anorexia</option>
<option value="Coronavirus">Coronavirus</option>
<option value="Diarrea">Diarrea</option>
<option value="Gripe">Gripe</option>
</select>
<input type="submit" id="superboton" value="superfiltro">
</form>
</div>
<br>
<hr>
<br>
<div>
<input type="text" id="pacienteNombre" placeholder="Buscar paciente por nombre">
<button id="buscar">BUSCAR PACIENTE</button>
</div>
</div>
</header>
<main>
<h2 id="numeropacientes"></h2>
<section id="pacientes">
<!-- <article>
<h3>Nombre y apellido</h3>
<ul>
<li>EDAD: 38</li>
<li>NUMERO SEGURIDAD SOCIAL: A456789</li>
</ul>
<div class="diagnostico">
Coronavirus
</div>
</article> -->
</section>
</main>
<script src="js/funciones.js"></script>
<script src="js/eventos.js"></script>
</body>
</html>Upvotes: 1
Kidas
Reputation: 329
you need to be careful when you code
check the line
const boton1 = document.querySelector('#botonEdad') / //<-- remove the slash
Upvotes: 1
Related Questions
- Why doesn't my filter function work? (Javascript)
- Javascript Filter function, not behaving as expected
- .filter() in javascript not working as expected
- Javascript filter function is not working proeprly
- Filter function don't return values
- Javascript filter function not returning array
- Why isn't my implementation of a Where function working?
- filter function isn't return right value
- Why am i getting undefined with this filter function?
- How to use javascript filter function