How to create javascript multi dimensional array?

Question

I want to create an multidimensional array this from following code.

var i = 0;
$('.button_image').each(function () {
 buttons[i]['left'] = $(this).position().left;
 buttons[i]['top'] = $(this).position().top;
 i++;
});

Array should be like this

buttons[1]['left']=10;
button[1][top]=20;
buttons[2]['left']=40;
button[2][top]=50;

but it gives following error on firefox console.

TypeError: buttons[i] is undefined
buttons[i]['left']=$(this).position().left;

Please tell me what is wrong on my code. Thanks in advance.

I want this format:

[rows] => Array ( 
 [0] => Array ( 
 [column1] => hello 
 [column2] => hola 
 [column3] => bonjour )
 [1] => Array ( 
 [column1] => goodbye 
 [column2] => hasta luego 
 [column3] => au revoir ) )

• Krishna Karki: I want need this format array from $.each function. [rows] => Array ( [0] => Array ( [column1] => hello [column2] => hola [column3] => bonjour ) [1] => Array ( [column1] => goodbye [column2] => hasta luego [column3] => au revoir ) )
• Karl-Johan Sjögren: Edit your question with the additional info instead of adding it as a comment. It's almost unreadable as it is now.

Answer 1

Javascript has no multidimensional Arrays, it only has Arrays of Arrays or likewise Objects of Objects, etc.

So, to create an array inside another array, you need to define the element i of the initial array itself as an array first. You can do so by simply adding an initialisation buttons[i] = []; inside your each loop.

However, what you really need, is an object instead of an array, since arrays can only have numeric indices like buttons[0][2], and objects can have arbitrary indices like buttons[0]['left'] or the equivalent notation buttons[0].left like you wrote in your question.

// this is making buttons[i] a new object:
buttons[i] = {}; // the preferred notation over "new Object();"
// now this works without problem:
buttons[i]['left'] = $(this).position().left;
buttons[i]['top'] = $(this).position().top;
// equivalent notation:
buttons[i].left = $(this).position().left;

• MattDiamant: In this example, it's an array of objects.
• MattDiamant: Also, because Arrays are Objects, buttons[i] = []; buttons[i]['left'] = 100; console.log(buttons[i]['left']; will log 100, and no error will be thrown. It just won't increase the buttons.length, but it will show up in for ... in loops.
• Christoph: @Matt I am very well aware of that, but I didn't mention it, because it's a bad way to work with arrays, because it defeats the initial purpose of Arrays and should be avoided - especially by beginners.
• user1636522: Could you share your definition of a multidimensional array?
• MattDiamant: @wared Typically, in most languages, the term multidimensional array has a specific definition, even down to the way it is represented in memory. So, a multidimensional array is different than an Array of Arrays: Read More About The Difference Between These In C# (and this applies to most other languages).

Answer 2

You should initialize the objects before using the second dimension of the array.

Here's an example:

var myArr = new Array();
myArr[0] = new Array();
myArr[0][0] = 'Hello';
myArr[0][1] = 'World!';
alert(myArr[0][0] + ' ' + myArr[0][1]);

Answer 3

Simply push new objects into an array.

var buttons = [];
$('.button_image').each(function () {
 buttons.push({
 left: $(this).position().left,
 top: $(this).position().top
 });
});

Then you can access the objects using indexes: buttons[1].left for example.

Answer 4

You could do far simpler :

var buttons = $('.button_image').map(function () {
 return $(this).position();
}).get();

That said, here is how to fix your code :

var i = 0, buttons = []; // init "buttons" as an array
$('.button_image').each(function () {
 buttons[i] = {}; // init "buttons[i]" as an object
 buttons[i]['left'] = $(this).position().left;
 buttons[i]['top'] = $(this).position().top;
 i++;
});

You might have guessed that it's actually not a multidimensional array, I would rather call it an "array of objects" : [{ left: 10, top: 20 }, { left: 40, top: 50 }]. However, I don't see the connection between the first part of your question and the desired format.