javascript / beginner
Snippet
Filtering Interactive Lists using Array Filter in Svelte
Using JavaScript's built-in `Array.prototype.filter` within a reactive declaration (`$:`) automatically re-computes a filtered subset of elements whenever the query or base array changes.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>let items = ['Apple', 'Banana', 'Avocado', 'Cherry', 'Apricot'];let search = 'A';$: matchingItems = items.filter(item =>item.toLowerCase().startsWith(search.toLowerCase()));</script><input bind:value={search} placeholder="Filter fruits..." /><ul>{#each matchingItems as fruit}<li>{fruit}</li>{/each}</ul>
svelte
Breakdown
1
let items = ['Apple', 'Banana', 'Avocado', 'Cherry', 'Apricot'];
Initializes a list of strings stored in an array.
2
$: matchingItems = items.filter(item =>
Creates a reactive variable that re-runs the filter callback whenever dependencies update.
3
item.toLowerCase().startsWith(search.toLowerCase())
Tests each array element against the search string in a case-insensitive manner.
4
{#each matchingItems as fruit}
Iterates over the filtered array to render list elements for each item.