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

<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

let fruitList = ['Apple', 'Banana', 'Blueberry', 'Cherry', 'Date'];

Initializes the base array of string items.

$: visibleFruits = fruitList.filter(fruit => ...);

Creates a reactive filtered array that runs whenever searchQuery changes.

fruit.toLowerCase().includes(searchQuery.toLowerCase())

Converts both the array string and query to lowercase for case-insensitive matching.

Previous snippet Next snippet

More Beginner JavaScript exercises →

Filtering Array Elements Dynamically with Array Filter

Related