object Promise showing instead of data pulled from API call

Question

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

Does this answer your question? [Why is my asynchronous function returning Promise { } instead of a value?](https://stackoverflow.com/questions/38884522/why-is-my-asynchronous-function-returning-promise-pending-instead-of-a-val) | [async/await implicitly returns promise?](https://stackoverflow.com/q/35302431) | [How to access the value of a promise?](https://stackoverflow.com/q/29516390) | [How to return the response from an asynchronous call](https://stackoverflow.com/q/14220321) — VLAZ, Nov 14 '21 at 08:00
No it sadly doesnt i have tried that but i cannot await a call from the class because you cant async the whole class in order to use an await — Isaac Lyne, Nov 14 '21 at 08:10
1. Classes can have `async` methods. So, it's definitely possible to use `await` from a class. 2. You can always use `.then()` instead. Whatever your choice, you have an asynchronous piece of code - you *cannot* convert it to synchronous one. — VLAZ, Nov 14 '21 at 08:12
export class SharestableComponent implements OnInit { in this peice of code for my class how would i turn this into an async one — Isaac Lyne, Nov 14 '21 at 08:12
You don't make *the class* async. The *methods* can be async. — VLAZ, Nov 14 '21 at 08:17
Thats what i have done in the code above am i not correct? when calling the method if i put await in front of the call it says i cant do that in the class export thing and i should at the top of the module, but then i wouldnt be able to access it inside the front end — Isaac Lyne, Nov 14 '21 at 08:20

gaurav · Accepted Answer · 2021-11-14T08:15:34.343

4

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)
 })

edited Nov 14 '21 at 08:15

answered Nov 14 '21 at 08:07

gaurav

491
3
13

but saving getData to a variable and then using that variable as {{variable}} in the angular html displays it as [object Promise] still – Isaac Lyne Nov 14 '21 at 08:18
Nevermind i did this in a different way and it worked, your a genius and thanks x – Isaac Lyne Nov 14 '21 at 08:33

object Promise showing instead of data pulled from API call

1 Answers1