What is the correct way to call a method property inside an object in a store?

Question

I am working on my first Sveltekit app project, converting from a React based project. I got stuck with a bit of a tricky method inside an object inside a store. Before I refactor the entire data structure to something perhaps more intuitive ( this is still a data structure derived from the React way of doing things ) , I wanted to understand how to do this properly in case I need it again.

An object stores some meta data about a dataset.

    const dataSetsIndex = [
    {id: ':sample:alphabet',
    permanent: true,
    metadata: {
        title: 'Alphabetic Letter Frequency',
        source: 'https://observablehq.com/@d3/bar-chart-transitions'
        },
        attachments: {
            data: import ('/src/dataSets/alphabet.json'),
        }
    }
]; 
export default dataSetsIndex;

There would be more objects with the { id: permanent: metadata: { title: source: } attachments: { data: ()=> } } structure in this dataSetsIndex component prop.

But when my program eventually tries to access the data from an external JSON ti display on a route in Sveltekit , I can't seem to find a way to make that Promise from the import('/src/dataSets/alphabet.json') method return.

Following the docs, I tried an interface that destructures the data and stores it in a writable - the data in the JSON file is fields:[] , rows:[]

import DataSets from "../dataSets/dataSetsIndex.js";
import {writable} from "svelte/store";

export const dataSetsStore = writable([]);

let destructedDataSets = () => {

    const dataSets = DataSets.map( ( dataset, index  ) =>
        {
            return {
                id: index,
                title: dataset.metadata.title,
                source:  dataset.metadata.source,
                fields: dataset.attachments.data().then(
                    (success) => { return success.fields},
                    (fail) => {return fail})
            }
        }
    )

    dataSetsStore.set(dataSets);
};

destructedDataSets();

then bringing that in to a route which is reactive

<script>
    import {dataSetsStore} from "../stores/dataSetsStore.js"
</script>


{#each $dataSetsStore as metadataObject}
    <div>
        {metadataObject.title.toUpperCase()}
        {metadataObject.fields}
    </div>
{/each}

only displays ALPHABETIC LETTER FREQUENCY [object Promise]

What am I missing here?

Answer 1

OK, so I figured it out and this is working. I looked at this related post to help me understand the role of {#await} in the context of this particular structure... my code excerpt below uses Bulma to draw up a table for the results

<script>
    import {dataSetsStore} from "../stores/dataSetsStore.js"
</script>


    {#each $dataSetsStore as metadataObject}
        {#await metadataObject.importDataFrom()}
            <p>loading...</p>
            {:then theFields}
        <table class="table">
            <thead>{metadataObject.title.toUpperCase()}</thead>
                {#each theFields.fields as f}
                    <th>
                        <abbr class="has-background-success is-size-5 p-1" title={f.name}>
                            {f.name.trim().slice(0,10)}
                        </abbr>
                        <span class="has-text-info is-size-8">
                            {f.type}
                        </span>
                    </th>
                {/each}
        </table>
        {:catch error}
            <p>Something went wrong: {error.message}</p>
        {/await}
    {/each}