Tengo un archivo HTML con una entrada y un elemento de botón en el cuerpo que se ve así:
<input type="text" name="searchBar" id="searchBar"> <button onclick="returnText()">Submit</button>Tenga en cuenta que el botón ejecutará la función 'returnText()' cuando se haga clic.
Además, mi archivo HTML se vincula a un archivo JavaScript que contiene la siguiente matriz:
const myData = [ { name: "John Miller", age: 33, location: "Chicago" }, { name: "Jane Doe", age: 78, location: "Lansing" }, { name: "Jamie Stevens", age: 21, location: "San Diego" } ]Ahora, estoy tratando de tomar la entrada del usuario y encontrar cualquier cadena o número que coincida con cualquier cadena o número en uno de los objetos de mi matriz, y mostrárselo al usuario. Estoy atascado tratando de descubrir cómo hacer coincidir la entrada del usuario con los datos en mi matriz. Puedo hacer cada una de estas piezas por separado, pero parece que no puedo juntarlas.
Lo más cerca que he llegado es lo que tengo a continuación. Pero esto solo devuelve una matriz vacía.
function returnText() { let input = document.getElementById('searchBar').value.toLowerCase(); let filteredNames = myData.filter(e => e.name === input); console.log(filteredNames); };Debe convertir el valor de propiedad del name del elemento a minúsculas al comparar.
const myData=[{name:"John Miller",age:33,location:"Chicago"},{name:"Jane Doe",age:78,location:"Lansing"},{name:"Jamie Stevens",age:21,location:"San Diego"}]; function returnText() { let input = document.getElementById('searchBar').value.toLowerCase(); let filteredNames = myData.filter(e => e.name.toLowerCase() === input); console.log(filteredNames); }; <input type="text" name="searchBar" id="searchBar" value="John Miller"> <button onclick="returnText()">Submit</button> Si desea verificar cada propiedad, puede usar Object.values para obtener los valores de propiedad del objeto y verificar si uno de los valores es igual a la entrada. El beneficio de esta solución sobre la verificación de propiedades codificadas es que si elige agregar una propiedad adicional, seguirá funcionando correctamente.
const myData=[{name:"John Miller",age:33,location:"Chicago"},{name:"Jane Doe",age:78,location:"Lansing"},{name:"Jamie Stevens",age:21,location:"San Diego"}]; function returnText() { let input = document.getElementById('searchBar').value.toLowerCase(); let filteredNames = myData.filter(e => Object.values(e).map(e => String(e).toLowerCase()).some(e => e.includes(input))); console.log(filteredNames); }; <input type="text" name="searchBar" id="searchBar" value="Miller"> <button onclick="returnText()">Submit</button>Te refieres a algo como esto ?
const myData = [{name:"John Miller",age:33,location:"Chicago"},{name:"Jane Doe",age:78,location:"Lansing"},{name:"Jamie Stevens",age:21,location:"San Diego"}]; function returnText() { let input = document.getElementById('searchBar').value.toLowerCase(); let filteredNames = myData.filter((e) => { return Object.values(e).some((value) => { return value.toString().toLowerCase().includes(input); }); }); console.log(filteredNames); }; <input type="text" name="searchBar" id="searchBar" value="John Miller"> <button onclick="returnText()">Submit</button>