How do I filter through an array and return the values in that array that match a user input?-CodePudding

I have an HTML file with an input and a button element in the body that looks like this:

<input type="text" name="searchBar" id="searchBar">
<button onclick="returnText()">Submit</button>

Notice that the button will execute the 'returnText()' function when clicked.

Furthermore, my HTML file links 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"
}
]

Now, I am trying to take the user input and find any string or number that matches any string or number in one of the objects in my array, and display it back to the user. I am stuck trying to figure out how to match the user input with the data in my array. I can do each of these pieces separately, but can't seem to put them together.

The closest I have gotten is what I have below. But this only returns an empty array.

function returnText() {
 let input = document.getElementById('searchBar').value.toLowerCase();
 let filteredNames = myData.filter(e => e.name === input);
 console.log(filteredNames);
 };

CodePudding user response：

You need to convert the item's name property value to lower case when comparing.

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>

If you want to check every property, you can use Object.values to get the property values of the object and check whether one of the values is equal to the input. The benefit of this solution over checking hard coded properties is that if you choose to add an extra property, this will still function properly.

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>

CodePudding user response：

Do you mean something like this ?

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>