Este es mi archivo JSON:
layers :[ { key: "1", title: "Computer Science", expanded: false, subLayer: [ { key: "a", title: "Programming Language", expanded: false, subLayer: [ { key: "a.1", title: "HTML", expanded: false, subLayer: [], }, { key: "a.2", title: "CSS", expanded: false, subLayer: [], }, ], }, ], }, ]Imágenes:
Mi pregunta es: cuando busco Lenguaje de programación e Informática aparece, pero si busca partes en elementos de subcapa como HTML y CSS, no aparece o no puede, ¿por qué? ¿Y qué se debe mejorar de mi codificación? Si estoy escribiendo mi código:
const filteredData = data.layers.filter((el) => { if (props.input === '') { return el } return el.title.toLowerCase().includes(props.input) || el.subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0 })Solo está buscando la el.subLayer subLayer También debe buscar la subLayer anidada. Esto se puede hacer recursivamente observando si el title del objeto actual incluye su entrada, y si no es así, puede verificar si algún objeto en su subLayer incluye la entrada en el título llamando recursivamente a la función de búsqueda:
const layers = [{ key: "1", title: "Computer Science", expanded: false, subLayer: [{ key: "a", title: "Programming Language", expanded: false, subLayer: [{ key: "a.1", title: "HTML", expanded: false, subLayer: [], }, { key: "a.2", title: "CSS", expanded: false, subLayer: [], }, ], }, ], }, ]; const hasKeyword = (obj, keyword) => { return obj.title.toLowerCase().includes(keyword) || obj.subLayer.some(nested => hasKeyword(nested, keyword)); } const search = (layers, keyword) => { return layers.filter(obj => hasKeyword(obj, keyword)); } const res = search(layers, "css"); console.log(res);