The promise object is displayed instead of the actual data retrieved from the API call

Question

The promise object is displayed instead of the actual data retrieved from the API call

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 output

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:

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.

angular angularjs typescript

Answer 1

Answer №1

Have you given this a try?

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

It appears to be functioning correctly

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

Answer 2

Have you given this a try?

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

It appears to be functioning correctly

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

The promise object is displayed instead of the actual data retrieved from the API call

Answer №1

Similar questions

What could be causing my TestBed providers to not properly replace the actual service in use?

Accessing an Array from a service method in Angular and passing it to my main component

How to dynamically assign a type based on a single choice from multiple options (props)

I would like my division to split into two halves, each with a width of 50%, and be aligned next to each other using fxLayout

Express throwing module errors

Encountering a 404 error in Angular 9 when refreshing the browser

What is the best method for translating object key names into clearer and easier to understand labels?

Next.js is having trouble identifying the module '@types/react'

What is an improved method for defining a TypeScript type to store API method invocations?

Can you explain the distinction between String[] and [String] in TypeScript?

Which is more efficient: Storing the database as a private member variable in Ionic 3 SQLite or creating a new database for every query

Angular 8 is throwing an error stating that the property 'token' is not recognized on the 'Object' data type

What is a more precise way to define an Object type on a temporary basis?

Exploring the functionality of generic components in React Native when using TypeScript

transferring information to a different application module (or page) through a double-click feature in AngularJS

Is there a way to modify a single object within an array?

Ways to deactivate a button using CSS

Properties cannot be accessed using the standard method in the controller; however, they function correctly when using an arrow

Prevent ASP.NET Core routing from intercepting Angular 5 routing calls during deep linking operations

Different Approaches for Handling User Interactions in Angular Instead of Using the Deferred (Anti-?)Pattern