asyncData not displaying API results

Question

I'm quite new to making my own API's and backend. I've set up an express server that has an API call to Salesforce that returns (in the terminal):

{      
  attributes: {
    type: 'Opportunity',
    url: '/services/data/v42.0/sobjects/Opportunity/xxxxxxxxxxxx'
  },
  Id: 'xxxxxxxxxxxx',
  Name: 'United Oil Standby Generators',
  StageName: 'Closed Won'
}

However, when I try to call the API from inside Nuxt using asyncData, it returns nothing. Here is my asyncData:

asyncData ({ params, error, $http }) {
  return $http
    .$get('/api/salesforce/' + params.id)
    .then((res) => {
        console.log('here we go')
        console.log(res.json)
      return { opp: res }
    })
    .catch((e) => {
      error({ statusCode: 404, message: 'User not found, ' + e })
    })
  
},

When I run the page, my terminal console returns results (since I've asked the express server to do that), but when I use the Vue tools on Chrome or try to access the data, there is nothing in Opp. If I return res.json - it returns as undefined. It should be returning as .json already since I've set it in the backend.

Could anyone see where I'm going wrong here? Like I said - I'm pretty new to working with my own API's.

kissu · Accepted Answer · 2021-07-23 18:15:13Z

1

If you go to let's say, a /subjects/3 path with _id.vue being dynamic, you can use the following to have access to this mocked API.

You can use the following to have it displayed on the Nuxt side

<template>
  <div>
    {{ opp }}
  </div>
</template>

<script>
export default {
  async asyncData({ params, error, $http }) {
    try {
      const res = await $http.$get(
        `https://jsonplaceholder.typicode.com/todos/${params.id}`
      )
      console.log('here we go', res)
      return { opp: res }
    } catch (err) {
      error({ statusCode: 404, message: `User not found, ${err}` })
    }
  },
}
</script>

A working github repo can be found here: https://github.com/kissu/so-nuxt-fetch

I'm not sure if there is something not working with your API, but this is how you handle this on the frontend at least.

answered Jul 23, 2021 at 18:15

kissu

47.3k16 gold badges94 silver badges196 bronze badges

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

1 Comment

Jack Sumner Over a year ago

Huh, I got the response from here. Looks like my API isn't working properly. I'm not a backend dev so this is really annoying to fix. I might ask a separate question, thanks for the help kissu!

Collectives™ on Stack Overflow

asyncData not displaying API results

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related