How to fetch an remote API with svelte?

Question

I am fetching a quote from an API and the fetching seems to work, because the first console.log is being called correctly, but second is not. The content is a field in the json object from the API.

<script>
    import { onMount } from "svelte";
    let non = [];


    onMount(async function() {
        const res = await fetch("https://api.quotable.io/random");
        const json = await res.json();
        non.push(json);
        console.log(non);
    });

</script>

<div>
   {#each non as {content}}
   <p>{content}{console.log(content)}</p>
   {/each}
</div>

Answer 1

Because Svelte's reactivity is triggered by assignments, using array methods like push and splice won't automatically cause updates.

In yor example, if you replace non.push(json) with non = [json] it seems to work.

https://svelte.dev/tutorial/updating-arrays-and-objects