Filter retults of a Svelte Promise - svelte-3

Question

In making my first app with Svelte I loved it except for the following which came up when filtering the results of a promise from a text input called search.
Filtering products before the promise resolves fails as products is type function.
I had to include a type check before continuing...
typeof products === "object" && ...
{#await promise then products}
<div class="flex justify-center flex-wrap">
{#each typeof products === "object" &&
products.filter((s) =>
s.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
) as product
}
<Product
{product}
{handleSelectProduct}
selected={selectedProducts.includes(product)}
/>
{/each}
</div>
{/await}
Is there a way to avoid this?
Thanks

Answer 1

There should be no need to validate typeof products === "object". But it's good practice to keep the logic (like filters) out of the template and keep the template "lean".
see example below (can run in https://svelte.dev/repl/)
<script>
let search = "c";
let promise = new Promise((resolve) => {
resolve([{ name: "abc" },{ name: "bcd" },{ name: "cde" },{ name: "def" }]);
});
$: filtered = promise.then((r) =>
r.filter((s) =>
s.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
)
);
</script>
<input bind:value={search}>
{#await filtered then products}
<ul>
{#each products as product}
<li>{product.name}</li>
{/each}
</ul>
{/await}
{#await promise then products}
<ul>
{#each products.filter((s) =>
s.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())) as product
}
<li>{product.name}</li>
{/each}
</ul>
{/await}
Both blocks have the same result, so the typeof check is not needed (but the first one is a bit easier on the eyes).
If you are having issues that are requiring you to validate the product type, you should check the result of the promise.