Parsing associative array via AJAX

Question

I have the following associative array and i try to send it to the server via AJAX.

Checking my console, in the network tab, it's posted but nothing is parsed.

Array creation:

   var FiltersArray = [];

    FiltersArray['category'] = this.category.val(); 
    FiltersArray['Type1'] = this.type1.val(); 
    FiltersArray['Type2'] = this.type2.val();

Assoc array (console.log):

[category: "6", Type1: "998", Type2: "20100100"]

Request:

$.ajax({
    type: POST,
    url: 'something.php',
    data: {
        data: FiltersArray 
    }
}).done(function(data) {
    console.log('Server Response: ' + data);
})

Complete code:

          $(document).ready(function() {
    var filters = {
        category: $("#categoryInp"),
        type1: $("#type1Inp"),
        type2: $("#type2Inp"),
        button: $("#FilterBtn"),

        returnArray: function() {
            var FiltersArray = [];

            FiltersArray['category'] = this.category.val();
            FiltersArray['Type1'] = this.type1.val();
            FiltersArray['Type2'] = this.type2.val();

            return FiltersArray;
        },
        sendRequest: function(type, URL) {
            $.ajax({
                type: type,
                url: URL,
                data: JSON.stringify(this.returnArray()),

                beforeSend: function() {}

            }).done(function(data) {
                console.log('Server Response: ' + data);
            }).fail(function() {
                alert("An error occurred!");
            });
        }
    };

    filters.button.on('click', e => {
        console.log(filters.returnArray());
        filters.sendRequest('POST', 'Modules/Products.order.module.php');
    });

});

Hi @mplungjan, actually no, data expects a value, i need to send an array there. — , Aug 20 '19 at 08:34
And you really want an object: `var FiltersObj = {}` instead of an array. — Andy, Aug 20 '19 at 08:34
Try `contentType: 'application/json', data: JSON.stringify(FiltersArray),` — mplungjan, Aug 20 '19 at 08:36
As @Andy has mentioned, you might want to use a [javascript json objects](https://www.w3schools.com/js/js_json_objects.asp) like `var FiltersObj = {}` — sassy_rog, Aug 20 '19 at 08:37
@SASSY_ROG — That isn't JSON — http://benalman.com/news/2010/03/theres-no-such-thing-as-a-json/ — Do not trust W3Schools, they are awful. — Quentin, Aug 20 '19 at 08:42

Quentin · Accepted Answer · 2019-08-20T08:58:09.730

There is no such thing as an associative array in JavaScript.

There are objects, which hold key:value pairs of data.
There are arrays, which are a type of object that provides special behaviour when the key name is an integer.

jQuery distinguishes between arrays and other kinds of objects when you pass one in data.

If you pass an array it will not do anything with key:value pairs where the key is not an integer.

Use a plain object and not an array for this.

Aside: Variable names beginning with a capital letter are traditionally reserved for storing constructor functions in JavaScript. Don't use that naming convention for other kinds of data.

var filters = {};

filters['category'] = this.category.val(); 
filters['Type1'] = this.type1.val(); 
filters['Type2'] = this.type2.val();

It would be easier to just collect all the data as you create the object though:

var filters = {
    category: this.category.val(),
    Type1: this.type1.val(),
    Type2: this.type2.val()
};

Aside

data: {
    data: FiltersArray 
}

This will create a (seemingly pointlessly) complex data structure that you'll need to access in PHP as $_POST['data']['category'].

You probably want just:

data: filters

Aside

data: JSON.stringify(this.returnArray()),

This will send JSON instead of form encoded data.

If you do that then you'll also need to:

Set the contentType of the request to indicate that you are sending JSON
Explicitly parse the JSON in PHP

So you probably don't want to do that.

Parsing associative array via AJAX

1 Answers1