How to convert promise result into json?

Question

I'm trying to use axios to fetch json from an external API and serve it to my frontend. When I go to the route I created I see the json just fine. However, when I pass it to the frontend by hitting the end point and I console log to see if it works, I get this: frontend console log of promise

This is my backend code to fetch the external API:

app.get('/entertainment', async (req,res) => {

 const respy = await axios.get(process.env.API_URL, {
    headers: {
      'Authorization': `Bearer ${process.env.API_KEY}`
    }
  })
  .then((resp) =>  res.send(resp.data))
  .catch(e => console.log(e, "SOME ERROR"))
})

Frontend portion:

componentDidMount(){
     fetch('http://localhost:8000/entertainment').then((res) => {
       this.setState({
         projectData: res.json()
       })
     }).then(res => {
      console.log(this.state.projectData)
     })
   }

How do I resolve this promise? I thought the .then or the await would resolve it.

you are probably using 'fetch' to make the network request. Just do this 'fetch('api url').then(res => res.json()).then(json => //display it in ur frontend); hope it works, the promise is getting resolved. — Nike Lepz, Jul 19 '21 at 05:03
i.e. the "error" is in the frontend code, but you've shown the backend code — Bravo, Jul 19 '21 at 05:20
@NikeLepz I'm using axios and I tried to convert it to fetch but it doesnt work. — Pandamoniumsz, Jul 19 '21 at 05:37
res.json doesn't return the data, but the promise which resolves with your data. See https://javascript.info/fetch — Nike Lepz, Jul 19 '21 at 06:00

Nike Lepz · Accepted Answer · 2021-07-19T05:59:07.917

You are logging the promise into your console. And the promise is getting resolved by the way, as you can see in the screenshot. It is being resolved with the following object:

{
  businesses: [...],
  region: [...],
   total
}

You're just not doing anything with it. Consider doing the following:

make request to the api on your frontend and do log the data the fetch resolves with in the console

fetch(YOUR_SERVER_URL).then((res) => res.json()).then(data => {
  console.log(data);
});

Making a change to the code you've included in the edit:

componentDidMount(){
     fetch('http://localhost:8000/entertainment').then((res) => res.json()).then(data => {
       console.log(data)
       this.setState({
         projectData: data
       })
     })
   }

How to convert promise result into json?

1 Answers1