jQuery array set both key and value and send array via AJAX

Question

I want to send key value pairs to my php page, but I need to set the key and value dynamically from data tags.

Here's the code I have until now:

function send(){
    var attr = new Array();

    var key = $('#add').attr('data-key');
    var value = $('#add').attr('data-value');

    attr.push({ key : value });

    var data = {attributes: attr};

    $.ajax({
            url: "ajax.php",
            type: "POST",
            data: data,
            success: function(result) {
                alert(result)
            }
    });

}

This is not the actual code, it's just the basic functionality.

The problem is here:

attr.push({ key : value });

The 'key' is not taken as the variable I've set.

Can I please get some help? I'd really appreciate it. Thank you very much!

Solution 1

Update:

Since ECMAScript 6 (2015) it's possible to use computed object property names, which is supported by all current browsers and other JavaScript environments:

attr.push({ [key] : value });

---

Original Answer:

Use the bracket notation:

Instead of attr.push({ key : value }); use

var object = {}; 
object[key] = value;
attr.push(object);

Solution 2

If you did this:

var key = "abc", value="pqr";
arr.push({key: value});

It would have following:

[Object { key="pqr"}]

which is not what you wanted..

You have to be able to do this:

var arr = new Array();
keyValuePair = {};
keyValuePair[key]=value; // set your dynamic values

arr.push(keyValuePair);

Now you have:

[Object { abc="pqr"}]

Solution 3

Here is a simple example to set dynamic key and values of an array.

 var key = 1;  //your dynamic values
 var value = 2;
 var key1 = 3;
 var value1 = 5;

var myArray = new Array();
myArray[key] = value;  // set array key and values
myArray[key1] = value1;

// show the values stored
for (var i in myArray) {
    alert('key is: ' + i + ', value is: ' + myArray[i]);
}