Displaying data from Appwrite into sveltekit

So, I have an appwrite and sveltekit application running. This is my first time using both. I have managed to set up appwrite sdk and connected to database and have api data stream coming in when I log it. Here is the data I get from appwrite in the console.

Now I want to display this data and I am not sure where I am missing it. The info I find is for consuming REST api data and not really for data coming in from appwrite. Here is my code on the svelte side:

<script>

import { Client, Databases } from "appwrite";

const client = new Client();

const databases = new Databases(client);

client
    .setEndpoint('http://localhost/v1') // Your API Endpoint
    .setProject('63d89956ac3d018e22ff') // Your project ID
;

const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

promise.then(function (response) {
    console.log(response); // Success
   
}, function (error) {
    console.log(error); // Failure
});
let appdata = promise;

</script>
  {#each appdata.documents as front}<p>{front.content}</p>{/each}
<div class="hero min-h-screen" style="background-image: url(../src/images/header_front.png);">
    <div class="hero-overlay bg-opacity-60"></div>
    <div class="hero-content text-center text-neutral-content">
      <div class="max-w-md">
        <h1 class="mb-5 text-5xl font-bold prose">Welcome to Nafuna!</h1>
        <p class="mb-5 prose">

I know I am missing someting in how svelte displays this but please assist!

I tried to convert the data from the original const into let because had read that svelte displays from let but that didnt work either.

EDIT: I have included a return as suggested here and I still cant get the data to display so I thought I would paste the code here again with the updates:

<script lang="ts">

import { Client, Databases } from "appwrite";

const client = new Client();

const databases = new Databases(client);

client
    .setEndpoint('http://localhost/v1') // Your API Endpoint
    .setProject('63d89956ac3d018e22ff') // Your project ID
;

const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

promise.then(function (response) {
    console.log(response); // Success
    return response;
   
}, function (error) {
    console.log(error); // Failure
    throw error;
});

// let appdata;
// appdata = response;

</script>

  {#each appdata as front}<p>{front.documents.content}</p>{/each}

Solution

Here's a way without #await in case the whole appdata object is needed
reactive variable - ternary operator - ?. - ??

<script lang="ts">
    import { Client, Databases } from "appwrite";
    const client = new Client();
    const databases = new Databases(client);

    let appdata;
    $: documents = appdata ? appdata.documents : [] //or  appdata?.documents ?? []

    client
        .setEndpoint('http://localhost/v1') // Your API Endpoint
        .setProject('63d89956ac3d018e22ff') // Your project ID
    ;

    const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

    promise.then(function (response) {
        console.log(response); // Success
        appdata = response

    }, function (error) {
        console.log(error); // Failure
        throw error;
    });

</script>

{#each documents as front}
<p>
    {front.content}
</p>
{/each}

In case it's fine to only use the documents

<script lang="ts">
    import { Client, Databases } from "appwrite";
    const client = new Client();
    const databases = new Databases(client);

    let documents = [];

    client
        .setEndpoint('http://localhost/v1') // Your API Endpoint
        .setProject('63d89956ac3d018e22ff') // Your project ID
    ;

    const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

    promise.then(function (response) {
        console.log(response); // Success
        documents = response.documents

    }, function (error) {
        console.log(error); // Failure
        throw error;
    });

</script>

{#each documents as front}
<p>
    {front.content}
</p>
{/each}

Using #await to benefit from showing a message while loading and in error case (here appdata will be only available inside the :then block)

<script lang="ts">
    import { Client, Databases } from "appwrite";
    const client = new Client();
    const databases = new Databases(client);

    client
        .setEndpoint('http://localhost/v1') // Your API Endpoint
        .setProject('63d89956ac3d018e22ff') // Your project ID
    ;

    const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

</script>

{#await promise}
    <p>...waiting</p>
{:then appdata}
    {#each appdata.documents as front}
        <p>
            {front.content}
        </p>
    {/each}
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

Using #await with documents in component scope in case needed. Using an underscore in {:then _} as variable name indicates that the value doesn't matter and lets documents inside the #each loop point to the variable in the script tag

<script lang="ts">
    import { Client, Databases } from "appwrite";
    const client = new Client();
    const databases = new Databases(client);

    let documents = []

    client
        .setEndpoint('http://localhost/v1') // Your API Endpoint
        .setProject('63d89956ac3d018e22ff') // Your project ID
    ;

    const promise = databases.listDocuments('63d89aba02f41e8c4003', '63d89ad33cb270e9c8c1');

    promise.then(function (response) {
        console.log(response); // Success
        documents = response.documents

    }, function (error) {
        console.log(error); // Failure
        throw error;
    });

</script>

{#await promise}
    <p>...waiting</p>
{:then _}
    {#each documents as front}
        <p>
            {front.content}
        </p>
    {/each}
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}