javascript / beginner
Snippet
Filtering Array Elements Dynamically with Array Filter
The Array.prototype.filter method evaluates each element in an array against a boolean condition and returns a brand-new array containing only matching items. In Svelte, combining array filtering with a reactive declaration ($:) ensures the list recalculates automatically whenever the search query changes without mutating the original source array.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>let searchQuery = '';let fruitList = ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Date'];$: visibleFruits = fruitList.filter(fruit =>fruit.toLowerCase().includes(searchQuery.toLowerCase()));</script><input bind:value={searchQuery} placeholder="Search fruit..." /><ul>{#each visibleFruits as fruit}<li>{fruit}</li>{/each}</ul>
svelte
Breakdown
1
let fruitList = ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Date'];
Initializes the base array of string items.
2
$: visibleFruits = fruitList.filter(fruit => ...);
Creates a reactive filtered array that runs whenever searchQuery changes.
3
fruit.toLowerCase().includes(searchQuery.toLowerCase())
Converts both the array string and query to lowercase for case-insensitive matching.