CODEWITHSUNDEEP
jsonnode.jswebpackvue.jsvuejs2
CoderPJ
CoderPJ

Reputation: 1011

Passing data from Node to Vuejs

I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. My project structure looks like this:-

SampleProject
  -> BackEnd
  -> FrontEnd

I have used webpack-dev-server proxy option to proxy requests from webpack-dev-server (8080) to Node (3000).

The dev server configuration my webpack.config.js looks like this:-

devServer: {
    proxy: {
        '/api': {
            target: 'http://localhost:3000'
        }
    },
    historyApiFallback: true,
    noInfo: true
}

I have written a Node api in services.js

exports.getAllPatientData = function(req, res) {

con.connection.query("SELECT fname, lname, city, country_code, TIMESTAMPDIFF(YEAR, DOB, CURDATE()) AS age FROM sbds_patient_data where pid = 1", function(err, result, fields) {
    if (err) {
        throw err;
        res.json({ status: "error", message: "An error has occurred. Please try again later" });
    }

    console.log(result);
    res.json({ status: "success", results: result });
});}

And in app.js i call the service like this

app.get('/profile', services.getAllPatientData);

In my Vue component file I call the api like this:-

import axios from 'axios';

export default{
    data(){
        return{
            firstName: '',
            lastName: '',
            age: '',
            errors: []
        }
    },

    created: function(){
        this.getPatientInfo();
    },

    methods:{

        // Function to get the patient's personal information 
        getPatientInfo: function(){
            axios.get('http://localhost:3000/profile')
            .then(response =>{
                this.firstName = response.data;
                    this.lastName = response.data;
                    this.age = response.data;
            })
            .catch(e => {
                this.errors.push(e);
            })
        }
    }
}

Both the servers are now running. When I open localhost:8080/profile, I see the entire json object on the screen.

The browser console does not show any object. But my network says localhost:3000/profile. What wrong am I doing here? How can I rectify this issue and get the data?

Upvotes: 2

Views: 3684

Answers (1)

mackmack
mackmack

Reputation: 181

it's displaying exactly what you asked it to display.

change your axios response callback to look like this:

var user = JSON.parse( response.data ).results[0]
this.firstName = user.fname;
this.lastName = user.lname;
this.age = user.age;

Upvotes: 2

Related Questions