SvelteJS, can't iterate through object

Questions and Answers
1
System Information
  • Strapi Version: 4.1.2
  • Operating System: macOS 12.2.1
  • Database: Sqlite3 : 5.0.2
  • Node Version: v17.6.0
  • NPM Version: 8.5.3

I am following this tutorial to use strapi with SvelteJS.

I have articles instead of restaurants, here is the source code :

<script>
import { onMount } from 'svelte';

let articles = [];
let error = null

onMount(async () => {
	const parseJSON = (resp) => (resp.json ? resp.json() : resp);
	const checkStatus = (resp) => {
    if (resp.status >= 200 && resp.status < 300) {
      return resp;
    }
    return parseJSON(resp).then((resp) => {
      throw resp;
    });
  };
  const headers = {
    'Content-Type': 'application/json',
  };

	try {
		const res = await fetch("http://localhost:1337/api/articles", {
		  method: "GET",
		  headers: {
		     'Content-Type': 'application/json'
		  },
		}).then(checkStatus)
      .then(parseJSON);
		articles = res
	} catch (e) {
		error = e
	}
});
</script>

{#if error !== null}
  {error}
{:else}
  <ul>
  {#each articles as article}
    <li>
  		{article.title}
    </li>
  {/each}
  </ul>
{/if}

I can make requests with postman or http.

My problem is that I can’t iterate through the articles with {#each articles as article}. I have this error :

Uncaught (in promise) Error: {#each} only iterates over array-like objects.

Is there something I am missing ?

2

Ok I managed to do it with await blocks from Svelte :

<script>
async function getArticles() {
		const res = await fetch(`http://localhost:1337/api/articles`);
		const text = await res.json();

		if (res.ok) {
			return text;
		} else {
			throw new Error(text);
		}
	}

let promise = getArticles();
</script>

<main>
    {#await promise}
        <p>wait...</p>
    {:then articles}
        {#each articles.data as article}
            <li>
                {article.attributes.title}
            </li>
        {/each}
    {:catch error}
        <p style="color: red">{error}</p>
    {/await}
</main>