Using fetch with async/await returns [object Object]

Question

I'm trying to fetch this public API using fetch with async and await, but the fetch method is returning an [object Object]:

The class I'm using to fetch the API:

class FetchAnimalApi {
  async getAnimalInfo(animal) {
    const request = await fetch(`http://my_api_url.com/${animal}`);
    const response = await request.json();

    return `${animal} goes like ${response.sound}`;
  }
}

The structure the API is returning (if the animal is a pig):

{"color": "pink", "sound": "roinc"}

I'm importing my class in another file and calling it as:

const animals = new FetchAnimalApi();
console.log(animals.getAnimalInfo('pig'));

So, what am I doing wrong?

EDIT:

Now my console.log() shows exactly what I want to print, but when I return the response, I'm still getting [object Object]:

function getInfo() {
  const animals = new FetchAnimalApi();

  return animals.getAnimalInfo('pig').then(result => result);
}

While debugging, I realized that [object Object] is being printed in my screen right after const request = await fetch(http://my_api_url.com/${animal}) line is executed.

[object Object] is probably just because of a string conversion in your final output. If you console.log() the output directly, you should see the desired object. You can't put an object into a template literal and get the properties printed out. Also, getAnimailInfo() returns a promise. So, you have to either use await with it or .then() to get the value from that promise. — jfriend00
– jfriend00, Commented Sep 22, 2017 at 22:53
@jfriend00 You can't put an object into a template literal and get the properties printed out? why do you think so? — alexmac
– alexmac, Commented Sep 22, 2017 at 22:58
@alexmac: Because template literals convert their "arguments" to strings and the default string representation of an object is [object Object], i.e. not a list of properties. — Felix Kling
– Felix Kling, Commented Sep 22, 2017 at 23:10
Because a template literal does a string conversion of the object and the default string conversion of an object gives you [object Object]. See the console output for this: jsfiddle.net/me0g20cx. You could override .toString() on your object and provide a custom string conversion if you wanted, but template literals don't do that on their own. — jfriend00
– jfriend00, Commented Sep 22, 2017 at 23:11
@jfriend00 yes, I know about that. I just don't understand how it's related to the question. In the template string above, both variables are strings, not objects. — alexmac
– alexmac, Commented Sep 22, 2017 at 23:20

alexmac · Accepted Answer · 2017-09-22 22:53:05Z

2

You can't call console.log(animals.getAnimalInfo('pig')); this way. animals.getAnimalInfo returns a promise. To get result, you should use then callback:

const animals = new FetchAnimalApi();
animals
  .getAnimalInfo('pig')
  .then(result => console.log(result));

answered Sep 22, 2017 at 22:53

alexmac

19.7k7 gold badges64 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jfriend00 Over a year ago

Since OP is using await everywhere else, the answer should probably offer await as an option too, not only .then().

alexmac Over a year ago

I wanted to suggest a solution with async/await, but it doesn't make sense in this context. Create a new function just to print the result of getAnimalInfo()...

Anna Over a year ago

Helped me a bit! But still no success ): I edited the question no explain further.

alexmac Over a year ago

@Anna How do you use getInfo()? If so: console.log(getInfo()), then it's still incorrect. getInfo returns a promise, you need use then callback to get the result.

Anna Over a year ago

The result from getInfo() is being set to a computed property (I'm using Ember). I'm already resolving the promise when calling animals.getAnimalInfo('pig').then(result => result), isn't it? I just need getInfo() to hold the formatted input.

|

Collectives™ on Stack Overflow

Using fetch with async/await returns [object Object]

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related