Tengo una serie de people a las que quiero poder buscar en función de su nombre. Tengo esto trabajando con el siguiente código
{peopleArray .filter((people) => { if ( people.name.includes(searchParams) ) { return true; } return false; }) .map((people) => ( //map the data here Tengo una entrada que establece el valor de lo que el usuario escribe para que se establezca en searchParams . Todo funciona bien, sin embargo, quiero tener 2 entradas y poder buscar por name y occupation .
Así que hice otra entrada para configurar con jobSearchParams y actualicé mi función de filtro de esta manera
{peopleArray .filter((people) => { if ( people.name.includes(searchParams) || people.occupation.includes(jobSearchParams) ) { return true; } return false; }) Sin embargo, el segundo filtrado no funciona en absoluto. Cuando la segunda entrada tiene un valor, la matriz no cambia en absoluto. Tengo console.log() 'd para mostrar que la entrada está pasando el valor a jobSearchParam pero aún así la matriz no cambia.
Para obtener más información, el peopleArray se ve así
{ name: "Bob", occupation: ["builder", "developer"] }Los valores de searchBox se establecen en las entradas así
<input className="nameSearch" placeholder="Search by Job" value={jobSearchParam} onInput={(e ) => setJobSearchParam(e.target.value)} />Es difícil para mí leer tu ejemplo, pero creé algo que hace lo que describes:
var people = [ { name: "John Citizen", occupation: "Developer" }, { name: "April O'Neill", occupation: "Teacher" } ]; search = function(name, job) { return people.filter(person => { return person.name.includes(name) || person.occupation.includes(job); }); }; var resultBoth = search("John", "Teacher"); var resultJohn = search("John", "Dev"); var resultTeach = search("Nonsense", "Teach"); console.log(resultBoth); console.log(resultJohn); console.log(resultTeach);Es posible que solo sus parámetros no sean correctos, recuerde que distinguirá entre mayúsculas y minúsculas, lo que puede solucionar llamando a Bajar en su nombre de persona antes de la verificación de inclusión.
ACTUALIZACIÓN: Modificado para atender una variedad de ocupaciones por persona:
var people = [ { name: "John Citizen", occupations: ["Developer", "Event Organiser"] }, { name: "April O'Neill", occupations: ["Teacher", "Event Organiser"] } ]; search = function(name, job) { return people.filter(person => { return person.name.includes(name) || person.occupations.some(occupation => occupation.includes(job)); }); }; var eventOrganisers = search("John", "Event"); var developers = search(null, "Develop") console.log(eventOrganisers); console.log(developers);Puede obtener el resultado de su búsqueda de esta manera.
const peopleArray = [ { name: "Will Smith", occupation: ["builder", "developer"] }, { name: "John Smith", occupation: ["Programmer", "developer"] }, { name: "Katy Perry", occupation: ["Singer", "Programmer"] } ]; const getSearchResult = (nameSearch, jobSearchParams) => { return peopleArray.filter((person) => { return person.name.includes(nameSearch) || person.occupation.includes(jobSearchParams) }); } console.log(getSearchResult("XYZ", "Singer")) // get single result console.log(getSearchResult("Smith", "Singer")) // get multiple result