Show list view from fetch in Svelte Native

Question

I am fetching data from an JSON placeholder api

I want to iterate over each response and show it in my list view, however I just can't get it to work. It always just shows the waiting block and never gets to the fetch block.

I am quite new to nativescript as well so any help is appreciated.

{#await posts}
   <label text="Waiting"></label>
 {:then data}
    <listView items="{data}" row="1" colSpan="2">
       <Template let:item>
          {#each data as item}      
             <label text="{item.id}. {item.body}" textWrap="true" />
          {/each}
       </Template>
    </listView>
  {:catch}
      <label text="Error occured"></label>
 {/await}



async function fetchPosts() {
    let allPosts = await fetch('https://jsonplaceholder.typicode.com/posts');
    return await allPosts.json();
}

let posts = fetchPosts();

Answer 1

Your iteration method unifies every item into a huge van. Simply change let:item to let:item={item}.

Code:

  ...
  <Template let:item={item}>
      <label text="{item.id}. {item.body}" textWrap="true" />
  </Template>
  ...