Parse data from Vue to express

Question

If I have some data in my Vue I want to parse to my express server, how can this be done? E.g. in the example below, I want to parse what I currently console log in my vue function, to the variable "id" on my server side

expressApp.post('/delete' , function (request, response) {

    const id = request.body.id;
    console.log(id)

        MongoClient.connect(url, function (err, db) {

            if (err) throw err;
            let dbo = db.db(dbName);

            dbo.collection("Members").deleteOne({"_id": objectId(id)}, function (err, res) {
                if (err) throw err;
                db.close();
            });
        });
    response.redirect('/agileApp');
    });


t: function (index) {
            fetch(membersUrl).then(function(response) {
                return response.json();
            }).then(function (data) {
                const formData = new FormData();
                formData.append("id", data[index]._id);
                for (var pair of formData.entries()) {
                    console.log(pair[0]+ ', ' + pair[1]);
                }

                fetch(deleteUrl, {
                    method: 'POST',
                    body: formData
                })
            })
        }

wangdev87 · Accepted Answer · 2020-11-01T13:23:14.763

1

expressApp.post('/delete' , function (request, response) {

    const id = request.body.id; // <--- get id from the request body

        MongoClient.connect(url, function (err, db) {

            if (err) throw err;
            let dbo = db.db(dbName);

            dbo.collection("Members").deleteOne({"_id": objectId(id)}, function (err, res) {
                if (err) throw err;
                db.close();
            });
        });
    response.redirect('/agileApp');
    });


t: function (index) {
            fetch(membersUrl).then(function(response) {
                return response.json();
            }).then(function (data) {
                const formData = new FormData();
                formData.append("id", data[index]._id);

                fetch('/delete', {
                  method: 'POST', // <---fetch POST method
                  body: formData
                })
            })
        }

edited Nov 01 '20 at 13:23

answered Nov 01 '20 at 13:16

wangdev87

8,611
3
8
31

Thank you. It says "const id" is undefined though. – egx Nov 01 '20 at 13:27
it maybe another issue in your express app. – wangdev87 Nov 01 '20 at 13:28
did you set body-parser ? – wangdev87 Nov 01 '20 at 13:28
Yes I should have npm installed body-parser. Is this the correct way to call it: "

– egx Nov 01 '20 at 13:31
yes, to check if your backend express app is working properly, try to request /delete api using postman. – wangdev87 Nov 01 '20 at 13:33
Well, when I try and console.log the formData variable it does not show my the ID. Could this be the error perhaps? – egx Nov 01 '20 at 13:35
no, it's not the error, to see the formdata correctly, check this. https://stackoverflow.com/questions/17066875/how-to-inspect-formdata – wangdev87 Nov 01 '20 at 13:37
Okay thanks. After inspected this way, the formData is correct I can see. However, it still says undefined when I try running it.. – egx Nov 01 '20 at 13:38
Could it be that the id should be ObjectId type as it's the autogenereted MongoDB ObjectId that is called for the deleteOne? – egx Nov 01 '20 at 13:45
no, send it as a string, you can get the specific mongodb row according to the id anyway. – wangdev87 Nov 01 '20 at 13:47
Okay. I've just update my post to my current code. The console log on the client side show the correct id, objectid but the console.log on the server side shows undefined. Any suggestions? – egx Nov 01 '20 at 13:52
first, try to send api request by postman to your backend api. – wangdev87 Nov 01 '20 at 13:53
It looks fine in api request postman. Just checked it. – egx Nov 01 '20 at 14:02
try with this in vue code. ...{ method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: json.stringify({id: ...}) } – wangdev87 Nov 01 '20 at 14:04
Okay. I've never used it before tbh, so just took a quick look at how to send basic request there. – egx Nov 01 '20 at 14:16
Attached ss below – egx Nov 01 '20 at 14:18
https://stackoverflow.com/questions/29364862/how-to-send-post-request-to-the-below-post-method-using-postman-rest-client/29365126 – wangdev87 Nov 01 '20 at 14:20
Thank you. I've just attached the response below – egx Nov 01 '20 at 14:27

Parse data from Vue to express

1 Answers1