I am currently working on fetching data from an API and showcasing the name of the returned data on the front end.
This function successfully retrieves the data through an API call:
async function retrieveData(url){
var _data;
let response = await fetch(url);
let data = await response.json();
_data = [data.name, data.id];
console.log(_data);
return _data[0];
After logging to the console, I can see the desired outputhttps://i.sstatic.net/TzzGJ.png
However, when attempting to display it on the front end like this:
options = retrieveData('https://api.opensea.io/api/v1/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/1/');
I use {{options}} to temporarily showcase the fetched data until further development.
The displayed result is as follows:
https://i.sstatic.net/ITy9Y.png
Rather than displaying [cryptopunk #1, 158831], it shows [object Promise]. Any insights on what might be going wrong?
Please note that the 'options = retrieveData()' is within the class and the async function appears above the @component tag.