I have an array of values and I'm looking to filter through the array to find usernames that contain the search query.
The search query is taken as an input from the user.
useEffect(() => {
let result;
if (usernames != null) {
result = usernames.filter((user) => user.username.includes(query));
}
console.log(result?.pop()?.username);
}, [query]);
Any ideas what I am doing wrong?
usernames array is an array of objects with the value string you want to search in nested in a link property.Check for the substring from the link property, and use array.prototype.find or array.prototype.filter to search for matches. find returns the first match or undefined if not found, filter returns all matches in an array.
usernames.find((user) => user.link.includes("gl"));
usernames.filter((user) => user.link.includes("gl"));
Code:
React.useEffect(() => {
let result;
if (usernames != null) {
result = usernames.find((user) => user.link.includes("gl"));
}
console.log(result);
}, []);
const usernames = [
{ link: "apple" },
{ link: "google" },
{ link: "shopify" }
];
let result;
if (usernames != null) {
result = usernames.find((user) => user.link.includes("gl"));
}
console.log(result?.link);Note: array.prototype.find returns undefined if the value is not found, so you'll likely want to check for nullish values before doing anything with the result, like access the link property, i.e. trying result.link to display "google".
Note 2: If you use filter then the result will be an array. You can either iterate the array, or pop the last value (or unshift the 0th element) to get a single result object. You'll still need to do the null check, something like result?.[0]?.username.
filter then the result will be an array. You can either iterate the array, or pop the last value (or unshift the 0th element) to get a single result object. You'll still need to do the null check, something like result?.[0]?.username.result?.pop()?.username should work.I can't be certain as to the full context of what you're doing, but generally speaking, to find an element in an array of objects that matches a specific condition, you need something like this:
const query = 'gl'
const ar = [{link: "apple"},
{link: "google"},
{link: "shopify"}]
const result = ar.find(item => item.link.includes(query))
if(result)
console.log(result.link)
else
console.log('Query not found')I see 2 issue on your code:
1 - in your map, user is not a string but an object containing a string named link so if you want to check if your link contains "gl" you have to replace
user.includes("gl")
by
user.link.includes("gl")
2 - The map doesn't look like it's the best option for your need. You should take a look at this interesting article
I think the filter function is more adapted in this situation.
If you want to get an array containing only the objects with a link including "gl" you need:
usernames.filter((user) => user.includes("gl"));
