Foros del Web » Programando para Internet » Javascript »

Realizar busquedas en un array según elemento seleccionado

Estas en el tema de Realizar busquedas en un array según elemento seleccionado en el foro de Javascript en Foros del Web. Hola a [email protected] Empezaré diciendo que mi nivel de javascript es bastante básico y tengo el siguiente problema, he hecho un array y un formulario ...
  #1 (permalink)  
Antiguo 13/06/2018, 05:22
 
Fecha de Ingreso: enero-2014
Mensajes: 66
Antigüedad: 4 años, 9 meses
Puntos: 2
Realizar busquedas en un array según elemento seleccionado

Hola a [email protected]
Empezaré diciendo que mi nivel de javascript es bastante básico y tengo el siguiente problema, he hecho un array y un formulario con distintos elementos y necesito hacer
búsquedas en el array según los elementos del formulario que tenga rellenados y/o seleccionados, para ello tengo una función donde recorro el formulario y meto en una variable los id de los elementos que tienen datos o están marcados y estos id luego los paso a otra función donde realizo la búsqueda según los valores recibidos, pues no me funciona la búsqueda y no se por qué
Este es el formulario
Código HTML:
Ver original
  1. <form name='formu1' id='formu1'>
  2. <label>Nombre: </label><input type="text" name="nombre" id="nombre">
  3. <label>Apellido: </label><input type="text" name="apellido" id="apellido"><br /><br />
  4.      <label>Ciudad: </label><select name="ciudad" id="ciudad">
  5.             <option value="">Elija opción</option>
  6.             <option value="madrid">Madrid (ES)</option>
  7.             <option value="sevilla">Sevilla (ES)</option>
  8.             <option value="toledo">Toledo (ES)</option>
  9.         </select><br /><br />
  10.       <label>Preferencias: </label><label><input name="Libros" type="checkbox" id="libros" value="libros" />Libros</label>
  11.       <label><input name="Peliculas" type="checkbox" id="peliculas" value="peliculas" />Películas</label>      
  12.       <label><input name="Deportes" type="checkbox" id="deportes" value="deportes" />Deportes</label><br /><br />
  13. </form>
  14. <input type="button" onclick="busqueda();" name="procesar" value="procesar"><br />
Esta es la función con la que extraigo los id de los distintos elementos
Código Javascript:
Ver original
  1. var datos = new Array();
  2. datos =[["Jose","Naranjo","Madrid","libros","peliculas","NO"],
  3. ["Jose","Perez","Sevilla","libros","NO","deportes"],
  4. ["Antonio","Garcia","Toledo","NO","peliculas","NO"],
  5. ["Antonio","Moreno","Toledo","libros","peliculas","deportes"]];
  6.  
  7. function elementosForm() {
  8. var mostrarId = "";
  9.  
  10. var los_elementos = document.getElementById('formu1').elements;
  11. for (i=0; i<los_elementos.length; i++) {
  12.     if(los_elementos[i].value == ''){
  13.         mostrarId += '';               
  14.     }else{
  15.         if((los_elementos[i].type == 'radio')||(los_elementos[i].type == 'checkbox')){
  16.             if(los_elementos[i].checked == true){                                  
  17.                 mostrarId += los_elementos[i].id +' && ';                          
  18.             }else{
  19.                 mostrarId += '';                               
  20.             }
  21.         }else{
  22.             mostrarId += los_elementos[i].id +' && ';                  
  23.         }
  24. }
  25. }
  26. alert(mostrarId.slice(0,-4));
  27.  
  28. return mostrarId.slice(0,-4)
  29. }
Y esta es la función con la que realizo las búsquedas
Código Javascript:
Ver original
  1. function busqueda(){
  2.  
  3.     var txtNombre = document.getElementById("nombre").value;   
  4.     var txtApellido = document.getElementById("apellido").value;   
  5.     var ciudades = document.getElementById("ciudad");
  6.     var buscarCiudad = ciudades.options[ciudades.selectedIndex].value; 
  7.     var buscarLibros = document.getElementById("libros").value;
  8.     var buscarPelis = document.getElementById("peliculas").value;
  9.     var buscarDeportes = document.getElementById("deportes").value;
  10.  
  11.     var n = datos.length;  
  12.     buscarNombre = [];
  13.    
  14.     for (var j = 0; j < n; j++)
  15.     {
  16.     var nombre = datos[j][0].toLowerCase().indexOf(txtNombre)>=0;  
  17.     var apellido = datos[j][1].toLowerCase().indexOf(txtApellido)>=0;  
  18.     var ciudad = datos[j][2].toLowerCase().indexOf(buscarCiudad) >=0;
  19.     var libros = datos[j][3].toLowerCase().indexOf(buscarLibros)>=0;
  20.     var pelis = datos[j][4].toLowerCase().indexOf(buscarPelis)>=0;
  21.     var deportes = datos[j][5].toLowerCase().indexOf(buscarDeportes)>=0;
  22.  
  23. var datosBusqueda = elementosForm();
  24. //var datosBusqueda = nombre && apellido && ciudad && libros && pelis && deportes  //si lo pongo de esta manera funciona bien, pero si uso la función no               
  25. if (datosBusqueda){
  26.                 buscarNombre.push(datos[j]);               
  27.         }
  28.        
  29.     }
  30.     alert(buscarNombre)
  31. }
Lo que quiero es que si tengo escrito el nombre sólo, la primera función me pase a la variable datosBusqueda el id: nombre y con este id buscar en el array, en el índice[0] y me muestre las coincidencias, si escribo el nombre y el apellido me pase el valor con los id: nombre && apellido y en este caso me busque en el índice [0] y en el [1] y así sucesivamente con todos los botones, si los datosBusqueda los escribo yo, funciona bien pero si esos datos vienen de la primera función ya no funciona y no se que estoy haciendo mal, tampoco se si realizar las búsquedas utilizando estas funciones es la forma más correcta de hacerlo
  #2 (permalink)  
Antiguo 13/06/2018, 09:01
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.133
Antigüedad: 10 años, 7 meses
Puntos: 1004
Respuesta: Realizar busquedas en un array según elemento seleccionado

Tus datos están mal formados, deberías usar un array de objetos y no array de arrays

por ejemplo
Código Javascript:
Ver original
  1. datos:[
  2.         {nombre:'Jose', ciudad:'tamuin', pais:'mexico', color:'rojo'},
  3.       {nombre:'Albert', ciudad:'la chingada', pais:'españa', color:'amarillo'},
  4.       {nombre:'Antonio', ciudad:'tzinzunzan', pais:'alemania', color:'blanco'},
  5.       {nombre:'Manuel', ciudad:'tepic', pais:'mexico', color:'negro'},
  6.       {nombre:'Margarita', ciudad:'cedral', pais:'españa', color:'azul'},
  7.     ]

de esa forma podrías utilizar Array Filter

que es tan fácil como poner
Código Javascript:
Ver original
  1. var txtNombre = document.getElementById("nombre").value;    
  2. if(txtNombre.length){
  3.     datos = datos.filter(item => {
  4.         return datos.nombre === txtNombre;
  5.     });
  6. }
  7.  
  8. if(txtApellido.length){
  9.     datos = datos.filter(item => {
  10.         return datos.apellido === txtApellido;
  11.     });
  12. if(buscarCiudad.length){
  13.     datos = datos.filter(item => {
  14.         return datos.ciudad === buscarCiudad;
  15.     });
  16.  
  17.  
  18. // al final despues de los if y filtros obtenemos el resultado unicamente con los valores deseados
  19. console.log(datos);
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #3 (permalink)  
Antiguo 14/06/2018, 04:11
 
Fecha de Ingreso: enero-2014
Mensajes: 66
Antigüedad: 4 años, 9 meses
Puntos: 2
Respuesta: Realizar busquedas en un array según elemento seleccionado

He usado el array de array, porque con los arrays tengo experiencia y los manejo mejor, pero con objetos no he hecho nada todavía, así que es algo nuevo para mí y voy aprendiendo sobre la marcha, según voy haciendo cosas.
He probado tu código y me da error en esta línea y no se porqué
Código Javascript:
Ver original
  1. datos = datos.filter(item => {
  #4 (permalink)  
Antiguo 14/06/2018, 09:13
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.133
Antigüedad: 10 años, 7 meses
Puntos: 1004
Respuesta: Realizar busquedas en un array según elemento seleccionado

puede ser por la versión de javascript... yo uso typescript y no me genera errores

prueba escribiéndolo así

datos = datos.filter(function(item){
//...
});
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #5 (permalink)  
Antiguo 14/06/2018, 11:44
 
Fecha de Ingreso: enero-2014
Mensajes: 66
Antigüedad: 4 años, 9 meses
Puntos: 2
Respuesta: Realizar busquedas en un array según elemento seleccionado

Con la modificación ya no me sale error de sintaxis y he cambiado datos: [ por datos = [ porque me salía datos no definido pero escribo un nombre en el cuadro de texto y no me muestra nada y pone length 0
  #6 (permalink)  
Antiguo 14/06/2018, 22:07
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.133
Antigüedad: 10 años, 7 meses
Puntos: 1004
Respuesta: Realizar busquedas en un array según elemento seleccionado

Puedes intentar poner tu código en https://jsfiddle.net tal cual lo tienes.

Igual te dejo un ejemplo funcional de como lo haría yo, el ejemplo utiliza Vue con javascript tradicional, que igual lo puedes tomar tal cual o solo sacar la idea y llevarlo a tu forma de trabajo actual.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #7 (permalink)  
Antiguo 15/06/2018, 01:27
 
Fecha de Ingreso: enero-2014
Mensajes: 66
Antigüedad: 4 años, 9 meses
Puntos: 2
Respuesta: Realizar busquedas en un array según elemento seleccionado

Aquí tienes el código https://jsfiddle.net/pedromir/enrhs7oq/4/
En cuanto al último, me sale error de sintaxis en esta línea
Código Javascript:
Ver original
  1. usuarios_filtrados(){
Y en la consola web del Firefox me sale esto ReferenceError: Vue is not defined
  #8 (permalink)  
Antiguo 15/06/2018, 10:23
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.133
Antigüedad: 10 años, 7 meses
Puntos: 1004
Respuesta: Realizar busquedas en un array según elemento seleccionado

Es porque no has incluido la librería de Vue, donde dice Javascript + No-library (pure JS), dale click y selecciona la librería.

Veo que tienes un mal concepto o mala practica.... el código que te he expuesto es meramente ilustrativo, no debes tomarlo tal cual y pegarlo con el tuyo, debes tomar la idea las funciones e integrarlas a tu caso.

De nada sirve hacer eso, te va a llevar a muchos errores y a estar preguntando porque falla aquí porque falla allá... y pues realmente no estas aprendiendo como se debe.

Te invito a que tomes tu código inicial y vuelvas a repasar ambos códigos (tuyo y mio) para que veas como funciona cada uno e integres ambos para crear algo que te funcione., de lo contrario no se te puede ayudar mas.

Edito:
error linea 14 html -> invocas a la funcion buscar, misma que no existe.
errro linea 23 javascript -> comparas datos.nombre con el nombre pero datos es un array de objetos, la comparativa debes hacerla sobre cada elemento de ese array.

Solventa esos dos errores y ya te funcionara.... otra cosa, mas trivial que quizas este bien para tu caso o quizas no.
tu haces una comparativa nombre === txtNombre lo que implicaria que el texto a escribir debera 100% exacto, cualquier variante y no obtendras resultados coincidentes.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 15/06/2018 a las 11:11
  #9 (permalink)  
Antiguo 16/06/2018, 01:32
 
Fecha de Ingreso: enero-2014
Mensajes: 66
Antigüedad: 4 años, 9 meses
Puntos: 2
Respuesta: Realizar busquedas en un array según elemento seleccionado

Como ya te comenté mi nivel en JavaScript, en general, es bastante básico, pero en arrays todavía me defiendo, pero el tema de objetos es totalmente nuevo para mí, y lo veo más complicado, pero empezaré a investigar el tema y con tus enseñanzas y explicaciones ya tengo por donde empezar, así que muchas gracias por tu tiempo y dedicación



La zona horaria es GMT -6. Ahora son las 11:49.