I am trying to get data from an opensea api and display the return part name from it in the front end.

this is my function to get the api call which works 100% fine

async function getData(url){
var _data;
 let response = await fetch(url);
 let data = await response.json();  
 _data = [data.name, data.id];
 console.log(_data);
 return _data[0];

This log to console shows what i want it to

However when i try make it display on the front end here

 options = getData('https://api.opensea.io/api/v1/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/1/');

using {{options}} to get the data and display it temporarily until it works

it shows this

where the [object Promise] should show [cryptopunk #1, 158831]

Anyone have an idea of what i am doing wrong

the options = getdata() is inside the class and the async function above the @component

CodePudding user response：

Have you tried this

getData('https://api.opensea.io/api/v1/asset/0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb/1/').then(data=>{
console.log(data);
})

This is working properly

async function getData(url){
  var _data;
  let response = await fetch(url);
  console.log(response);
  return response;
 }
 
 getData('https://jsonplaceholder.typicode.com/todos/1').then(option=>{
 console.log(option)
 })

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>