如何创建javascript多维数组？

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 ) )

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;

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.