jQuery Ajax Post changes object structure

Question

Today, I'm working the first time with Ajax and facing a strange problem. While using jQuery to make an Ajax 'POST' request, it creates some strange syntax. I haven't found an answer to this in other questions, actually, I also don't know what I should look for.

With Postman I used this as the body of my 'POST' Request:

{
    "name": "t.bchuaer@test.de",
    "automaticDelete": false,
    "cc": {
        "ccFolder": false,
        "smartDelete": false,
        "deletionDays": 182
    },
    "filters": [
    {
        "id": 0,
        "active": false
    }
    ]  
}

When I use GET to get the objects (without Ajax) it returns exactly this. However, when I use POST with Ajax and get it through the same GET method as the other objects, I receive this:

{
    "name": "test@tester.com",
    "automaticDelete": "false",
    "cc[ccFolder]": "false",
    "cc[smartDelete]": "false",
    "cc[deletionDays]": "182",
    "id": 4
}

My jQuery code looks like this:

var emailAccount = {
        "name": emailAddress.val(),
        "automaticDelete": false,
        "cc": {
            "ccFolder": false,
            "smartDelete": false,
            "deletionDays": 182
        },
        "filters": []
    };

    $.ajax({
        type: 'POST',
        url: basicUrl + 'emails',
        data: emailAccount,
        success: function() {
        ...
        },
        error: function() {
        ...
        }
    });

What I've tried so far:

using dataType: "json"
using contentType: 'application/json' (leads to an 500 error from json-server)

So my question is: What is this?

"cc[ccFolder]": "false",
"cc[smartDelete]": "false",
"cc[deletionDays]": "182"

And why does Ajax create it like this?

I access the code like this:

function getData(path, followUp, id) {
    var dataRequest = new XMLHttpRequest();
    dataRequest.open('GET', basicUrl + path);

    dataRequest.onload = function() {
        var receivedData = JSON.parse(dataRequest.responseText)
        gotEmails(receivedData)
    };

    dataRequest.send();
}

function gotEmails(data) {
    for (i = 0; i < data.length; i++) {
        var userEmailAccount = {
            id: data[i].id,
            name: data[i].name,
            automaticDelete: data[i].automaticDelete,
            cc: data[i].cc,
            filters: []
        };

        if (data[i].filters != 'undefined') {
            var filterQuery = queryBuilder("filters?", data[i].filters);
            getData(filterQuery, 9, data[i].id);
        }
    }
}

Can you share how you are accessing the response? Don't see that in the above code. — Jeremy, Aug 01 '17 at 18:12
I've edited the question. I think this is the relevant code. With all the data that I create directly in the JSON and through Postman it works quite well. — Brudus, Aug 01 '17 at 18:21
Looks like it's doing exactly what the documentation said it'd do. jQuery doesn't convert objects to json for you. Objects are converted to param strings using the $.param method. — Kevin B, Aug 01 '17 at 18:21
But what is this? It looks like a dictionary. I didn't use JSON quite often, but I would expect it to be in the 'normal' object syntax. — Brudus, Aug 01 '17 at 18:25
see... js objects aren't a string format. XHR can only send things in string format, and therefore js objects can't be sent as objects. You have to convert them to strings. Some libraries try to do this for you, for example, angular.js will convert objects to json strings, and jquery will convert objects to param strings. You can of course override what happens by default by stringifying it yourself. — Kevin B, Aug 01 '17 at 18:26
Okay, thanks. I will try to override it when I receive the data. — Brudus, Aug 01 '17 at 18:28

score 0 · Accepted Answer · answered Aug 01 '17 at 23:54

I found a working solution by using:

var xmlhttp = new XMLHttpRequest();   // new HttpRequest instance 
xmlhttp.open("POST", basicUrl + 'emails');
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send(JSON.stringify(emailAccount));

instead of using ajax.

jQuery Ajax Post changes object structure

1 Answers1