1

Tengo una función que hice para filtrar objetos dentro de un Array principal. Esta lo que hace es sacar los resultados en objetos separados, (todos los objetos del array principal) luego con Object.keys(obj).some() lo que hago es obtener todos los valores de las keys de los objetos y con obj[key].includes(searchKey) verifico si algún valor incluye el termino de búsqueda (searchKey). Mirar codigo.

El problema:

El inconveniente esta en que solo me retorna el termino especifico de solo un objeto, esto quiere decir:

  • Si busco el termino "doc" me retorna los dos objetos esperados dentro del Array retornado ya que los valores de las keys correspondientes coinciden con el termino de búsqueda.

  • Si busco el termino "document" me retorna el Array esperado con solo un objeto ya que es el termino especifico y solo encuentra un resultado ya que solo coincide con un valor.

  • PERO: Si busco el termino "docs" o un termino que no coincida (tomado en cuenta que "docs" si es un valor existete) me retorna el siguiente error:

    obj[key].includes is not a function.

El código:

Cambia los valores de búsqueda (docs, document, null) para observar el error en la consola.

NOTA: Puedes observar como está estructurado el Array principal en el código.

// Array principal

var dictionary = [
  {
    "name": "document",
    "classes" : {
      "getElementById": "getElementById()",
       "getElementsByClassName": "getElementsByClassName"
    }
  },
  {
    "name": "docs",
    "classes": "holo"
  },
  {
    "name": "null",
    "classes": "null"
  }
];

// Función

function filterIt(arr, searchKey) {
  return arr.filter(function(obj) {
    return Object.keys(obj).some(function(key) {
      return obj[key].includes(searchKey);
    })
  });
}

//LOG

// Editar el string para buscar otro termino.

console.log(filterIt(dictionary, "docs"))

Conjeturas:

A simple vista parece que como si no existiera el valor, pero al comprobar haciendo un log de obj[key] dentro de some() puedo observar que se imprimen todos los valores de las keys de todos los objetos. Lo que me lleva a pensar, ¿Puede que me falte algún loop o algo por el estilo?

Muchas gracias.

2 respuestas 2

2

El problema, como apuntaba @Ilsanchez es que intentas llamar el método #includes de un objeto que, obviamente no implementa.

Cuando busca el valor document no se evidencia el error porque matchea el primer valor del objeto (en la primera posición) y devuelve true, por lo que nunca evalúa el segundo valor del objeto (que es el objeto anidado).
Por ello, cuando se busca docs o null, sí va a evaluar ese objeto y en ese momento hay un error de ejecución.

La solución más sencilla es hacer una operación de igualdad, en vez de un #includes.

const filterIt = (arr, searchKey) =>
    arr.filter(obj => Object.keys(obj).some(key =>  obj[key] == searchKey));

Obviamente, creo que esto no es lo que buscas, sinó comprobar que la clave de búsqueda está contenida en el valor del objeto. Es decir, si la searchKey es doc, deberían pasar document y docs.

En ese caso, se puede hacer algo parecido a tu respuesta, comprobar el tipo y luego hacer uso de la función #includes, es decir, aplicar un type safety.

const valueMatches = (value, searchKey) => 
    typeof value === 'string' && value.includes(searchKey);

const filterIt = (arr, searchKey) =>
    arr.filter(obj => Object.keys(obj).some(key =>
        valueMatches(obj[key], searchKey)
    ));

Al finalizar esta solución me pareció un poco fea. La gracia podría estar en buscar valores en profundidad, es decir, permitir filtrar por valores que se encuentren dentro de los objetos anidados, en cualquier profundidad. Para ello se puede hacer esta función, que busca recursivamente una clave en profundidad, haciendo uso del método #valueMatches previo

const isObject = value => typeof value === 'object';

const contains = (obj, searchKey) => {
    const keys = Object.keys(obj);
    return keys.some(k => {
        const value = obj[k];
        if (isObject(value)) 
            return contains(value, searchKey);
        return valueMatches(value, searchKey);
    });
};

El método comprueba que el valor sea un objeto, si es así, se llama a sí mismo, si no lo es, compara los valores con el #includes previamente definido.
Para usarlo, hay que cambiar el método #filterIt previo para incluir el #contains.

const filterIt = (arr, searchKey) =>
    arr.filter(obj => Object.keys(obj).some(key => {
        const value = obj[key];
        if (isObject(value))
            return contains(value, searchKey);
        return valueMatches(obj[key], searchKey)
    }));

De nuevo, comprueba que el valor sea un objeto, si es así, llama al nuevo método #contains.
En caso de ser un objeto, como estamos retornando el resultado del método #contains, nunca vamos a llamar al método #includes del objeto en sí.

Adicionalmente, también sirve para arrays, si es que los hubiera, ya que los arrays tienen por tipo object y están indexado por valores numéricos (0, 1, 2, 3, ...).

Por ejemplo, he modificado el diccionario de prueba del siguiente modo

const dictionary = [
  {
    "name": "document",
    "classes" : {
      "getElementById": "getElementById()",
       "getElementsByClassName": [
            "tag",
            "value",
            "anotherTag",
            "someValue"
       ]
    }
  },
  {
    "name": "docs",
    "classes": "holo",
    "complex": {
        "firstkey": "firstValue",
        "secondkey": "secondValue"
    }
  },
  {
    "name": "null",
    "key": "thirdValue",
    "classes": "null"
  }
];

Ahora, con la nueva implementación, buscando el término Value, ya podemos buscar en los objetos anidados

const filtered = filterIt(dictionary, "Value");
console.log(filtered); // Devuelve el segundo y tercer elemento del array.

Espero que haya servido de ayuda.

2
  • Eso fue excelente @VRoxa, muchas gracias por tu respuesta y que quede como la correcta para la posteridad y su busqueda, aunque ya hace mucho tiempo no trabajo en este proyecto ya, en su momento llegue a conclusiones similares, un saludo y muchas gracias nuevamente! Commented el 13 abr. 2020 a las 2:18
  • Gracias, porque la idea de recorrer en profundidad, no lograba plasmarla. Además añadiría, un toLowerCase en el contains searchKey = searchKey.toLowerCase(); y en el valueMatches también typeof value === 'string' && value.toLowerCase().includes(searchKey.toLowerCase()); Commented el 18 oct. a las 12:55
0

Estuve viendo como podía solucionarlo y al hacerlo de otra manera pude continuar, por lo que no voy a marcar mi propia respuesta como respuesta definitiva y esta queda abierta a quien pueda saber que es lo que pasa, ya que en serio me gustaría saberlo, pasando de ello prosigo con mi respuesta:

Mi solución:

Para afrontar el problema recurrí a los loops de toda la vida el proceso es similar y básicamente es la misma idea, por lo que me limitaré a colocar el código para que se observe como se estructura.

var dictionary = [
  {
    "name": "document",
    "classes" : {
      "getElementById": "getElementById()",
       "getElementsByClassName": "getElementsByClassName"
    }
  },
  {
    "name": "docs",
    "classes": "holo"
  },
  {
    "name": "null",
    "classes": "null"
  }
];

function filter(arr, searchKey) {
  var list = [];
  for (var i=0;i < arr.length; i++) {
    var curr = arr[i];
    Object.keys(curr).some(function(key){
      if (typeof curr[key] === "string" && curr[key].includes(searchKey)) {
        list.push(curr);
      }
    });
  }
  return list;
}

console.log(filter(dictionary, "docs"));

Muchas gracias de todas formas.

1
  • 1
    El problema parece ser que intenta ejecutar la función includes sobre un objeto en lugar de un string. Ocurre cuando llega a la primera propiedad classes. Así que, si, parece que te faltaría un algo si quieres filtrar dentro de objetos.
    – Ilsanchez
    Commented el 25 feb. 2019 a las 19:57

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.