In my HTML file, I have an input field and a button element within the body section. Here is how they are structured:
<input type="text" name="searchBar" id="searchBar">
<button onclick="returnText()">Submit</button>
It's worth noting that clicking the button will trigger the 'returnText()' function.
Moreover, the HTML file connects to a JavaScript file that contains the following array:
const myData = [
{
name: "John Miller",
age: 33,
location: "Chicago"
},
{
name: "Jane Doe",
age: 78,
location: "Lansing"
},
{
name: "Jamie Stevens",
age: 21,
location: "San Diego"
}
]
Currently, I am attempting to match user input with any string or number contained in one of the objects in the array, and then display the matched data. However, I'm encountering challenges in connecting these pieces effectively.
The code snippet I've been working on so far produces an empty array as the output, shown below:
function returnText() {
let input = document.getElementById('searchBar').value.toLowerCase();
let filteredNames = myData.filter(e => e.name === input);
console.log(filteredNames);
};