CODEWITHSUNDEEP
javascriptsvelte
Razvan Zamfir
Razvan Zamfir

Reputation: 4712

How can I filter through an array an return it instead of another one in this Svelte project?

I am working on a small Svelte application, for learning purposes (Im new to Svelte).

The application displays a JSON of countries in a Bootstrap 4 table. There is also a text box that can be used to filter through the countries:

const apiURL = "https://gist.githubusercontent.com/Goles/3196253/raw/9ca4e7e62ea5ad935bb3580dc0a07d9df033b451/CountryCodes.json";

let countries = [];
let filteredCountries = [];
let stringToMatch = '';

onMount(async function() {
    const response = await fetch(apiURL);
    countries = await response.json();
    filteredCountries = countries;
});

function filterList(){
  filteredCountries = countries;

  if(stringToMatch){
    filteredCountries = countries.filter(country => {
        return country.name.toLowerCase().includes(stringToMatch.toLowerCase()) || country.code.includes(stringToMatch.toUpperCase());
    });
  }
}

See a REPL with the entire code HERE.

I am looking for a way to filter through the countries array and return it filtered, instead of using JavaScript's filter() method which requires storing the results in another variable.

In other words, I wish I would not need the filteredCountries variable.

Is that possible? How?

Upvotes: 1

Views: 1995

Answers (1)

johannchopin
johannchopin

Reputation: 14873

An idea would be to use an getFilteredCountries() function so you don't need this filteredCountries variable.

You can define it like that:

function getFilteredCountries(countries, stringToMatch){
    if(stringToMatch){
        return countries.filter(country => {
            return country.name.toLowerCase().includes(stringToMatch.toLowerCase()) || country.code.includes(stringToMatch.toUpperCase());
        });
    } else {
        return countries
    }
}

and consume it in your #each:

{#each getFilteredCountries(countries, stringToMatch) as country}   
    <tr>
        <td>{country.name}</td>
        <td class="text-right">{country.code}</td>
    </tr>
{/each}

See a REPL with the entire code HERE.

Upvotes: 3

Related Questions