i have this array:
[
{
"title": "fruit",
"categories": [
"apple",
"banana"
]
},
{
"title": "city",
"categories": [
"Brazil",
"EUA",
"China"
]
},
{
"title": "name",
"categories": [
"Ana"
]
}
]
i want to filter this by any terms that the users type
i already got this, works only for title, but i want to search by title and category:
array.filter(f => f.title.includes(myString))
Alternate with || with a .some check on f.categories:
array.filter(f =>
f.title.includes(myString) ||
f.categories.some(
category => category.includes(myString)
)
);
Live demo:
const array = [
{
"title": "fruit",
"categories": [
"apple",
"banana"
]
},
{
"title": "city",
"categories": [
"Brazil",
"EUA",
"China"
]
},
{
"title": "name",
"categories": [
"Ana"
]
}
];
const input = document.querySelector('input');
input.addEventListener('input', () => {
document.querySelector('div').textContent = JSON.stringify(
array.filter(f =>
f.title.includes(input.value) ||
f.categories.some(
category => category.includes(input.value)
)
)
);
});<input>
<div></div>This isn't the logic your original code is implementing, but if you also need to check for different case matches:
const array = [
{
"title": "fruit",
"categories": [
"apple",
"banana"
]
},
{
"title": "city",
"categories": [
"Brazil",
"EUA",
"China"
]
},
{
"title": "name",
"categories": [
"Ana"
]
}
];
const input = document.querySelector('input');
input.addEventListener('input', () => {
const value = input.value.toLowerCase();
document.querySelector('div').textContent = JSON.stringify(
array.filter(f =>
f.title.toLowerCase().includes(value) ||
f.categories.some(
category => category.toLowerCase().includes(value)
)
)
);
});<input>
<div></div>
.some does? I like this answer but I want to understand better. Also, for title, can we do f.title === myString correct? Because title is not an array.
.some will return true if any of the items of the array being iterated over pass the test. So, here, it will return true if any items in f.categories contain myString. You can do f.title === myString, but that will only result in items being included if they're an exact match - OP seems to want a match when any character is included.ana as myString it returns just the fruit part. Maybe we need to return name as well. Can we do this : category => category.toLowerCase().includes('ana') to cover that? Also, probably do myString = myString.toLowerCase(). Just a suggestion!If you only want items that match your title and category, you can do this to get an array of matches.
array.filter(f => f.title === 'myTitle' && f.categories.includes('myCategory'));
I think this is enough if you just want to filter by title or category
const array = [
{
"title": "fruit",
"categories": [
"apple",
"banana"
]
},
{
"title": "city",
"categories": [
"Brazil",
"EUA",
"China"
]
},
{
"title": "name",
"categories": [
"Ana"
]
}
]
const string = 'Brazil'// whatever the user types
const result = array.filter(f => f.title === string || f.categories.includes(string))
console.log(result);