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

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}