sending back api data to vue in express returns empty object

Question

I'm trying to send some data back from my express app using the following in my app.js this data comes from a 3rd party api and I want to send it back to my front end application. I am able to see the content in my express api but it doesn't seem to deliver a result to my front end?? anyone have any ideas as to why I'm getting log below in the console.

I suspect it has to do with some async or timeout issue with the express app but I haven't been able to fix the issue myself.

function getFish(){
        axios.get('https://www.fishwatch.gov/api/species')
            .then(function (response) {
                console.log(response)
               return response

                })
                .catch(function (error) {
                    console.log(error);
                })
}


app.get('/getFish', async(req,res) =>{
    let fish = await getFish()
    res.json({fishes: fish})
})

when I try to log the data in my app, I only get an empty object

{}

here is my vue code to log the value's returned by my express api.

 created:function(){
     this.fetchFish()
   },

  methods: {

      fetchFish(){
         fetch('http://localhost:3000/getFish')
          .then((response) => {
             return response.json();
          })
          .then((data) => {
          console.log(data);
        });
    }
  }

Dan · Accepted Answer · 2020-04-25 08:34:12Z

1

You need to return the axios promise in your server's getFish function or the /getFish route won't be awaiting anything:

function getFish(){
    // New `return` statement
    return axios.get('https://www.fishwatch.gov/api/species')
    .then(function (response) {
        console.log(response)
        return response
    })
    .catch(function (error) {
        console.log(error);
    })
}

answered Apr 25, 2020 at 8:34

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

1 Comment

monsterpiece Over a year ago

yes that worked for me, I can see the data now inside my getFish route :) I have never used axios but I couldn't use fetch on the backend so thanks for helping me out

Collectives™ on Stack Overflow

sending back api data to vue in express returns empty object

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related