[FIXED] How can I pass window.screen to the back-end via AJAX?

Issue

If I do : window.screen, I got :

Screen {availWidth: 3440, availHeight: 1415, width: 3440, height: 1440, colorDepth: 24, …}availHeight: 1415availLeft: -1057availTop: -1415availWidth: 3440colorDepth: 24height: 1440orientation: ScreenOrientation {angle: 0, type: 'landscape-primary', onchange: null}angle: 0onchange: nulltype: "landscape-primary"[[Prototype]]: ScreenOrientationpixelDepth: 24width: 3440[[Prototype]]: Screen

So I assume, I can access it, so I sent it to my back-end like this so :

var data  = {};
data.w = window.screen; //as soon as I did this, I can't never see request sent out in the network tab, if I changed that line to `data.w = 'test';`, only then I see request sending out again... 


$.ajax({
    method: 'POST',
    url: '/tested-route',
    crossDomain: true,
    contentType: false,
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
        "Accept": "application/json",
        "Content-Type": "application/x-www-form-urlencoded",
        "Cache-Control": "no-cache"
    },
    data: data,
    success: function(response){
        console.log(response);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.log(JSON.stringify(jqXHR));
        console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
    }
});

Solution

Only enumerable properties of an object will be serialized by JSON.stringify.

Copy the properties you care about to a new object and encode that if you want to encode them as JSON.

Answered By - Quentin