How to create a multidimensional array in Javascript and avoid duplicates?

Question

I have the following HTML:

<input type="text" name="inp1" id="inp1" />
<input type="text" name="inp2" id="inp2" />
<input type="text" name="inp3" id="inp3" />

<input type="submit" value="Send" id="clickMe" />

Each time I click on the submit button I should add the values of each inp* to an array so I end up with something like this:

[
     ['inp1' => val1, 'inp2' => val2, 'inp3' => val3],
     ['inp1' => val10, 'inp2' => val20, 'inp3' => val30],
     ['inp1' => val11, 'inp2' => val21, 'inp3' => val31],
     ['inp1' => val12, 'inp2' => val22, 'inp3' => val32]
]

After reading this article I think I could do the following:

var obj = {};
var item = [];

$('#clickMe').click(function() {
    item.push(
        $('#inp1').val(),
        $('#inp2').val(),
        $('#inp3').val()
    ); 
});

But the solution above will end up with a lineal array and not what I want (example here on Fiddle). I have read here and here but I am getting confused.

Also I shouldn't have repeated elements so this:

[
     ['inp1' => val1, 'inp2' => val2, 'inp3' => val3],
     ['inp1' => val1, 'inp2' => val2, 'inp3' => val3]
]

Is invalid. So, how is the right way to deal with this and get a multidimensional array?. Can any give me some help and leave an example so I can get this?

EDIT: As suggested the code should be compatible with most of the browser out there and as for IE should be IE9+

Answer 1

You could maintain a Set, which is more designed for this purpose than using object properties:

var list = new Set(); // helper object to avoid duplicates
var items = []; // the real 2D array

$('#clickMe').click(function() {
    var item = [
        $('#inp1').val(),
        $('#inp2').val(),
        $('#inp3').val()
    ];
    var key = JSON.stringify(item);
    if (list.has(key)) return; // skip
    list.add(key);
    items.push(item);
    return false; // to avoid that the form submits.
});

If you have many more input elements, it might be worth it to get their values via a loop:

var item = $('form input[type=text]').map(function () { 
    return $(this).val(); 
}).get();

When support for older browsers is needed

... then Sets are not an option. Use a plain object instead:

var list = {}; // helper object to avoid duplicates
var items = []; // the real 2D array

$('#clickMe').click(function() {
    var item = [
        $('#inp1').val(),
        $('#inp2').val(),
        $('#inp3').val()
    ];
    var key = JSON.stringify(item);
    if (list[key] === 1) return; // skip
    list[key] = 1;
    items.push(item);
    return false; // to avoid that the form submits.
});

Answer 2

JSON.stringify(AssocArray);

Create Json string to send over AJAX request.

Or do $("form").serialize() . To know more about this method you can check http://api.jquery.com/serialize/

Answer 3

To create the equivalent of an associative array in Javascript, you need an object. The object properties act like array keys would in a language like PHP. For example:

var myObject = {
    a: [1,2,3],
    b: [4,5,6],
    c: {
        cat:"Fluffy",
        dog:"Fido"
    }
};

Here the properties a and b contain arrays, and the property c contains another object.

Answer 4

There is no such concept of an associative array in JavaScript. You should be hydrating an object and then sending that as an XMLHttpRequest either by form-encoding or JSON-encoding the object.

$('#clickMe').click(function() {
    var obj = {};
    obj[ $('#inp1').attr('name') ] = $('#inp1').val();
    obj[ $('#inp2').attr('name') ] = $('#inp2').val();
    obj[ $('#inp3').attr('name') ] = $('#inp3').val();
    console.log(obj) // see desired data-structure
    console.log(obj.inp1); // get inp1 val
    console.log(obj['inp1']); // get inp1 val again
});

This example would also be better if you could loop on the input elements with something like:

var elms = $('form input');
var obj = {};
for ( var i = 0; i < elms.length; i++ )
{
    obj[ $(elms[i]).attr('name') ] = $(elms[i]).val();
}

Answer 5

You can try to wrap up a JavaScript Object for each key value pair (attributes of the input fields) then push each object into an array. The following example might help:

var item = [];
$('#clickMe').click(function() {
    var val1 = $('#inp1').val();
    var val2 = $('#inp2').val();
    var val3 = $('#inp3').val();
    var obj = {
        inp1: val1,
        inp2: val2,
        inp3: val3
      };
item.push(obj);
});
//your code for AJAX goes here

I hope this helps.