Currently, I am executing a database query and then manipulating the data to obtain a single numeric value. This value is essential for use in a subsequent array.
The current definition of the array appears as follows (see below). The issue at hand is that all_kdm_coverage is a promise. However, what I require is to extract the numeric value from this promise.
const scrolls = [
{
title: "Kadena de Mano",
link: "./Kdm",
coverage: all_kdm_coverage
},
]
For additional context, here's an extended snippet:
async function GetCoverage(scroll_path) {
const apiName = 'foo';
const path = '/scrolls/' + scroll_path;
const myInit = {
headers: {},
response: false,
};
const response = await API.get(apiName, path, myInit)
console.log('response:',response)
return response.Items
}
function GetScroll(scroll_name, scroll_array) {
const scroll_data = scroll_array.find(scroll => scroll.Scroll === scroll_name);
console.log('scroll_data:',scroll_data)
return scroll_data
}
let dataGlobal;
const getData = () => (dataGlobal ??= GetCoverage("all"));
const all_kdm_coverage = getData().then(
(data) => {
const kdm_entry = GetScroll("kdm", data)
const coverage = kdm_entry.Coverage
console.log('kdm coverage:',coverage)
return coverage
}
)
const scrolls = [
{
title: "Kadena de Mano",
link: "./Kdm",
coverage: all_kdm_coverage
},
]
// To demonstrate how the scrolls array is utilized
export const DanzanRyuCollection = () => {
return (
<>
<h1 className="h1_index">Scrolls</h1>
<Collection
type="list"
items={scrolls}
gap="1.0rem"
alignItems="center">
{(item, index) => (
<ScrollCard
key={index}
padding="1rem">
<Link href={item.link}>
{item.title}
</Link>
<Rating ratings={[item.coverage]}/>
</ScrollCard>
)}
</Collection>
</>
);
};
What strategy should be employed to define the coverage: value in scrolls?
Update: It has been suggested to do the following:
const scrolls = [
{
title: "Kadena de Mano",
link: "./Kdm",
coverage: await all_kdm_coverage
},
]
However, attempting this results in the following error message indicating it is experimental and not fully supported:
Module parse failed: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enable it)
Error: The top-level-await experiment is not enabled (set experiments.topLevelAwait: true to enable it)
console.error @ client.js:1
window.console.error @ next-dev.js:27
overrideMethod @ react_devtools_backend_compact.js:2367
handleErrors @ hot-dev-client.js:131
processMessage @ hot-dev-client.js:202
eval @ hot-dev-client.js:50
eval @ websocket.js:58
handleMessage @ websocket.js:57