Estoy creando una barra de búsqueda para filtrar objetos de datos de valor clave. Obtengo que el filtro no es un error de función mientras realizo la búsqueda. ¿Hay alguna otra función para filtrar en objetos de par de valores clave?
Datos :-
{ meta_city : { label: "City" values: (5) ["DL", "KA", "GJ", "MH", "UP"] }, meta_country : { label: "Country" values: (5) ["IN", "US", "CA"] } }Manejar la búsqueda (los datos de filterData son del estado local): -
const handleSearchFilter = (event) => { const searchWord = event.target.value; const newFilter = Object.keys(filterData).map((key) => { filterData[key].filter((value) => { return value.includes(searchWord); }); }); setFilterData(newFilter); }; <div className="mp-input-field-container"> <input className="mp-input" placeholder="Search" onChange={handleSearchFilter} /> </div>Deberías usar reduce así:
const handleSearchFilter = (event) => { const searchWord = event.target.value; const newFilter = Object.keys(filterData).reduce((result, key) => { if (filterData[key].values.includes(searchWord)) { result.push(filterData[key]); }; return result; }, []); setFilterData(newFilter); };En este ejemplo, estoy devolviendo un resultado de matriz. puede devolver un objeto si lo desea.
El filtro no existe en un tipo de cadena. Cuando se llama a filterData[key], key tiene un valor de label . filterData["label"] devuelve una cadena "Ciudad".
probar
const searchWord = (word) => Object.values(filterData).filter((data) => data.values?.includes(word)); const handleSearchFilter = (event) => { const word = event.target.value; const [newFilter] = searchWord(word) setFilterData(newFilter); }searchWord regresa si busca "DL"
[ { label: 'City', values: [ 'DL', 'KA', 'GJ', 'MH', 'UP' ] } ]¿Era ese el resultado que estabas buscando?
Aquí está el fragmento de código para probar que la solución funciona:
var filterData = { meta_city : { label: "City", values: ["DL", "KA", "GJ", "MH", "UP"] }, meta_country : { label: "Country", values: ["IN", "US", "CA"] } } const searchWord = (word) => Object.values(filterData).filter((data) => data.values.includes(word)); console.log(searchWord("DL"))