3

var data = [
    {
      _id: '001',
      name: 'Elon Musk',
      rol: 'Chairman',
      image: 'https://picsum.photos/200/101',
      email: '[email protected]',
      phone: '5544332211',
      active: true,
      exp: 30
    },
    {
      _id: '002',
      name: 'Carlos Hernandez',
      rol: 'Chief Operation Officer',
      image: 'https://picsum.photos/200/102',
      email: '[email protected]',
      phone: '5544332211',
      active: true,
      exp: 15
    },
    {
      _id: '003',
      name: 'Alberto Siurob',
      rol: 'Chief Information Officer',
      image: 'https://picsum.photos/200/103',
      email: '[email protected]',
      phone: '5544332211',
      active: false,
      exp: 5
    },
    {
      _id: '004',
      name: 'Erick Lopez',
      rol: 'Chief Marketing Officer',
      image: 'https://picsum.photos/200/104',
      email: '[email protected]',
      phone: '5544332211',
      active: true,
      exp: 1
    },
  ];
  

function search( value ){
 // Si no esta vacio
 if( value ) {
  
  const keys = ['name', 'email', 'rol'];
  const match = searchKeys( data, keys, value.toLowerCase() );
  console.log( match );
 }
}

function searchKeys( source, keys, word ){
   const arr = [];
   
   // Recorrer llaves de busqueda
  keys.forEach( ( k ) => {
  
    // Recorrer la fuente
    source.forEach( ( s ) => {
    
      // validar si el indice tiene un valor semejante
      if ( s[ k ].toLowerCase().includes( word ) ) {
      
        // validar si ya existe en el arreglo
        if ( arr.indexOf( s._id ) < 0 ) {
          arr.push( s );
        }
      }
    });
  });
  return arr;
}
<input type="text" onkeyup="search( this.value )">

Estoy haciendo un pequeño buscador con los beneficios de Javascript. La verdad es que funciona muy bien, pero tengo que problema que si sólo pongo una letra en el input, triplica los resultados retornados.

Que estaré haciendo mal?

PD: Si tienen alguna sugerencia de hacerlo de una mejor forma siempre es bienvenida

3
  • 1
    Hola Alberto, a mí me retorna bien los datos cuando pongo la "a" o la "s" por ejemplo. No me devuelve ningún dato triplicado. ¿Podrías ser algo más específico en que letras te da error o cual es la salida que estás obteniendo? Gracias!! Commented el 31 oct. 2019 a las 18:08
  • mmm por ejemplo, yo lo testee con la "e" Commented el 31 oct. 2019 a las 18:08
  • Vale Alberto, parece ser que en el snippet de Stakoverflow no se muestran los logs muy largos por consola, he visto a que te referías al meterme en la consola del navegador, donde si que se mostraban repetidos. He escrito una respuesta que espero que te sirva :) Commented el 31 oct. 2019 a las 19:08

2 respuestas 2

2

Pudes usar .filter, .some y .test para reducir código. La idea sería filtrar todos los elementos en los que alguna de las propiedades ('name', 'email', 'rol') coincide con la búsqueda.

var data = [{"_id":"001","name":"Elon Musk","rol":"Chairman","image":"https://picsum.photos/200/101","email":"[email protected]","phone":"5544332211","active":true,"exp":30},{"_id":"002","name":"Carlos Hernandez","rol":"Chief Operation Officer","image":"https://picsum.photos/200/102","email":"[email protected]","phone":"5544332211","active":true,"exp":15},{"_id":"003","name":"Alberto Siurob","rol":"Chief Information Officer","image":"https://picsum.photos/200/103","email":"[email protected]","phone":"5544332211","active":false,"exp":5},{"_id":"004","name":"Erick Lopez","rol":"Chief Marketing Officer","image":"https://picsum.photos/200/104","email":"[email protected]","phone":"5544332211","active":true,"exp":1}];

function search(value) {

    if (value) {

        const keys = ['name', 'email', 'rol'];

        return data.filter(e => keys.some(a => (new RegExp(value,"gi")).test(e[a])));

    }

}

console.log(search("lop"));

1
  • Te quedó brutal la respuesta sensei, gracias. Commented el 1 nov. 2019 a las 15:13
2

Tu problema reside en que el array arr es un array de objetos por lo que cuando haces arr.indexOf( s._id ) no estás buscando sobre los campos _id de cada objeto si no sobre los índices de cada uno de los objetos (0, 1, 2...) por lo tanto nunca te encuentra el valor y es por eso por lo que para cada iteración del foreach te introduce el objeto dentro del array.

He añadido una función a tu código (objetoYaContenido) en la cual comparo directamente el id de cada uno de los objetos contenidos en el array arr con el id del objeto que estamos comparando en ese momento y, si no está contenido, agregarlo al array.

var data = [
    {
      _id: '001',
      name: 'Elon Musk',
      rol: 'Chairman',
      image: 'https://picsum.photos/200/101',
      email: '[email protected]',
      phone: '5544332211',
      active: true,
      exp: 30
    },
    {
      _id: '002',
      name: 'Carlos Hernandez',
      rol: 'Chief Operation Officer',
      image: 'https://picsum.photos/200/102',
      email: '[email protected]',
      phone: '5544332211',
      active: true,
      exp: 15
    },
    {
      _id: '003',
      name: 'Alberto Siurob',
      rol: 'Chief Information Officer',
      image: 'https://picsum.photos/200/103',
      email: '[email protected]',
      phone: '5544332211',
      active: false,
      exp: 5
    },
    {
      _id: '004',
      name: 'Erick Lopez',
      rol: 'Chief Marketing Officer',
      image: 'https://picsum.photos/200/104',
      email: '[email protected]',
      phone: '5544332211',
      active: true,
      exp: 1
    },
  ];
  

function search( value ){
 // Si no esta vacio
 if( value ) {
  
  const keys = ['name', 'email', 'rol'];
  const match = searchKeys( data, keys, value.toLowerCase() );
  console.log( match );
 }
}

function searchKeys( source, keys, word ){
   const arr = [];
   
   // Recorrer llaves de busqueda
  keys.forEach( ( k ) => {
  
    // Recorrer la fuente
    source.forEach( ( s ) => {
    
      // validar si el indice tiene un valor semejante
      if ( s[ k ].toLowerCase().includes( word ) ) {
      
        // validar si ya existe en el arreglo
        if ( objetoYaContenido(s._id, arr ) == false ) {
          arr.push( s );
        }
      }
    });
  });
  return arr;
}

function objetoYaContenido(id, datos){
  var encontrado = false;
  
  for(var i = 0; ((i < datos.length) && (encontrado == false)); i++){
    if ( datos[i]._id == id) {
      encontrado = true;
    }
  }
  return encontrado;
}
<input type="text" onkeyup="search( this.value )">

Tu Respuesta

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

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