Im trying to send an array to my Node/MongoDB server via and AJAX POST request. The body also contains other variables. Here is the client side JS code:

function setupForm(){
    $("#add").submit(function(event) {
        event.preventDefault();
        var name = $("#name").val();
        var logo = $("#logo").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var address = $("#address").val();
        var postcode = $("#postcode").val();
        var openingHours = $("#openingHours").val();
        var loc = [44, 44];

        $.ajax({
            type: "POST",
            url: "http://localhost:3000/services",
            data: "name=" + name + "&logo=" + logo + "&phone=" + phone + "&email=" + email + "&address=" + address + "&postcode="+ postcode +"&openingHours=" + openingHours + "&loc=" + loc,
            success: function(){alert('success');}
        });
    });
}

And here is the the server side code:

exports.addWine = function(req, res) {
    var wine = req.body;
    console.log('Adding wine: ' + JSON.stringify(wine));
    db.collection('services', function(err, collection) {
        collection.insert(wine, {safe:true}, function(err, result) {
            if (err) {
                res.send({'error':'An error has occurred'});
            } else {
                console.log('Success: ' + JSON.stringify(result[0]));
                res.send(result[0]);
            }
        });
    });
}

It adds it to the database but in this format. I would like it in an array:

"postcode" : "ugh",
"openingHours" : "fhgfh",
"loc" : "44,44"

Im trying to send an array to my Node/MongoDB server via and AJAX POST request. The body also contains other variables. Here is the client side JS code:

function setupForm(){
    $("#add").submit(function(event) {
        event.preventDefault();
        var name = $("#name").val();
        var logo = $("#logo").val();
        var phone = $("#phone").val();
        var email = $("#email").val();
        var address = $("#address").val();
        var postcode = $("#postcode").val();
        var openingHours = $("#openingHours").val();
        var loc = [44, 44];

        $.ajax({
            type: "POST",
            url: "http://localhost:3000/services",
            data: "name=" + name + "&logo=" + logo + "&phone=" + phone + "&email=" + email + "&address=" + address + "&postcode="+ postcode +"&openingHours=" + openingHours + "&loc=" + loc,
            success: function(){alert('success');}
        });
    });
}

And here is the the server side code:

exports.addWine = function(req, res) {
    var wine = req.body;
    console.log('Adding wine: ' + JSON.stringify(wine));
    db.collection('services', function(err, collection) {
        collection.insert(wine, {safe:true}, function(err, result) {
            if (err) {
                res.send({'error':'An error has occurred'});
            } else {
                console.log('Success: ' + JSON.stringify(result[0]));
                res.send(result[0]);
            }
        });
    });
}

It adds it to the database but in this format. I would like it in an array:

"postcode" : "ugh",
"openingHours" : "fhgfh",
"loc" : "44,44"

• javascript
• arrays
• ajax
• mongodb
• express

• Use jQuery's serialize() function. – angelcool Commented Apr 21, 2016 at 21:17

3 Answers 3

As mentioned, use serializeArray(). To add your extra parameter, just append it to the array as shown below.

function setupForm(){
    $("#add").submit(function(event) {
        event.preventDefault();

        var data = $(this).serializeArray();
            // add extra parameters (don't forget brackets)
            data.push({ name: 'loc[]', value: 44 });
            data.push({ name: 'loc[]', value: 44 });

        $.ajax({
            type: "POST",
            url: "http://localhost:3000/services",
            data: data,
            success: function() {
               alert('success');
            }
        });
    });
}

If you want to continue using your method of just building the query string, you would have to add &loc[]=44&loc[]=44 but it is better in the long run to just use one of the serialize functions.

Given the data you are using, I would advise sending the data in the POST requests' body. This will retain the datatypes (array, bools, etcs) thanks to JSON.

$.post("http://localhost:3000/services", {
        name: $("#name").val(),
        loc: [44, 44]
        ...etc
    }, function(){alert('success');}
);

Backend should work fine without alterations. You might need to add body-parser to your middleware stack. The body-parser middleware will transform the body into a javascript object that you can push right into your database.

Take a look at jQuery's .serialize() and .serializeArray(). They should be able to do what you're looking for.