Realizar busquedas en un array según elemento seleccionado

[pedromir]

Hola a tod@s
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:

<form name='formu1' id='formu1'>
<label>Nombre: </label><input type="text" name="nombre" id="nombre">
<label>Apellido: </label><input type="text" name="apellido" id="apellido"><br /><br />
     <label>Ciudad: </label><select name="ciudad" id="ciudad">
            <option value="">Elija opción</option>
            <option value="madrid">Madrid (ES)</option>
            <option value="sevilla">Sevilla (ES)</option>
            <option value="toledo">Toledo (ES)</option>
        </select><br /><br />
      <label>Preferencias: </label><label><input name="Libros" type="checkbox" id="libros" value="libros" />Libros</label>
      <label><input name="Peliculas" type="checkbox" id="peliculas" value="peliculas" />Películas</label>      
      <label><input name="Deportes" type="checkbox" id="deportes" value="deportes" />Deportes</label><br /><br />
</form>
<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:

var datos = new Array();
datos =[["Jose","Naranjo","Madrid","libros","peliculas","NO"],
["Jose","Perez","Sevilla","libros","NO","deportes"],
["Antonio","Garcia","Toledo","NO","peliculas","NO"],
["Antonio","Moreno","Toledo","libros","peliculas","deportes"]];
 
function elementosForm() {
var mostrarId = "";
 
var los_elementos = document.getElementById('formu1').elements;
for (i=0; i<los_elementos.length; i++) {
    if(los_elementos[i].value == ''){
        mostrarId += '';                
    }else{
        if((los_elementos[i].type == 'radio')||(los_elementos[i].type == 'checkbox')){
            if(los_elementos[i].checked == true){                                   
                mostrarId += los_elementos[i].id +' && ';                           
            }else{
                mostrarId += '';                                
            }
        }else{
            mostrarId += los_elementos[i].id +' && ';                   
        }
}
}
alert(mostrarId.slice(0,-4));
 
return mostrarId.slice(0,-4)
}
 

Y esta es la función con la que realizo las búsquedas

Código Javascript:

function busqueda(){
 
    var txtNombre = document.getElementById("nombre").value;    
    var txtApellido = document.getElementById("apellido").value;    
    var ciudades = document.getElementById("ciudad"); 
    var buscarCiudad = ciudades.options[ciudades.selectedIndex].value;  
    var buscarLibros = document.getElementById("libros").value;
    var buscarPelis = document.getElementById("peliculas").value;
    var buscarDeportes = document.getElementById("deportes").value; 
 
    var n = datos.length;   
    buscarNombre = [];
    
    for (var j = 0; j < n; j++) 
    {
    var nombre = datos[j][0].toLowerCase().indexOf(txtNombre)>=0;   
    var apellido = datos[j][1].toLowerCase().indexOf(txtApellido)>=0;   
    var ciudad = datos[j][2].toLowerCase().indexOf(buscarCiudad) >=0;
    var libros = datos[j][3].toLowerCase().indexOf(buscarLibros)>=0;
    var pelis = datos[j][4].toLowerCase().indexOf(buscarPelis)>=0;
    var deportes = datos[j][5].toLowerCase().indexOf(buscarDeportes)>=0;
 
var datosBusqueda = elementosForm();
//var datosBusqueda = nombre && apellido && ciudad && libros && pelis && deportes  //si lo pongo de esta manera funciona bien, pero si uso la función no                
if (datosBusqueda){
                buscarNombre.push(datos[j]);                
        }
        
    }
    alert(buscarNombre)
}
 

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

[ArturoGallegos]

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

por ejemplo

Código Javascript:

datos:[
        {nombre:'Jose', ciudad:'tamuin', pais:'mexico', color:'rojo'},
      {nombre:'Albert', ciudad:'la chingada', pais:'españa', color:'amarillo'},
      {nombre:'Antonio', ciudad:'tzinzunzan', pais:'alemania', color:'blanco'},
      {nombre:'Manuel', ciudad:'tepic', pais:'mexico', color:'negro'},
      {nombre:'Margarita', ciudad:'cedral', pais:'españa', color:'azul'},
    ]
 

de esa forma podrías utilizar Array Filter

que es tan fácil como poner

Código Javascript:

var txtNombre = document.getElementById("nombre").value;    
if(txtNombre.length){
    datos = datos.filter(item => {
        return datos.nombre === txtNombre;
    });
}
 
if(txtApellido.length){
    datos = datos.filter(item => {
        return datos.apellido === txtApellido;
    });
if(buscarCiudad.length){
    datos = datos.filter(item => {
        return datos.ciudad === buscarCiudad;
    });
 
 
// al final despues de los if y filtros obtenemos el resultado unicamente con los valores deseados
console.log(datos);
 

[pedromir]

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:

datos = datos.filter(item => {
 

[ArturoGallegos]

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){
//...
});

[pedromir]

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

[ArturoGallegos]

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.

[pedromir]

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:

usuarios_filtrados(){
 

Y en la consola web del Firefox me sale esto ReferenceError: Vue is not defined

[ArturoGallegos]

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.

[pedromir]

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