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

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 ) )` — Krishna Karki, Dec 09 '13 at 11:56
Edit your question with the additional info instead of adding it as a comment. It's almost unreadable as it is now. — Karl-Johan Sjögren, Dec 09 '13 at 11:57

Christoph · Accepted Answer · 2013-12-09T12:12:58.400

3

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;

edited Dec 09 '13 at 12:12

answered Dec 09 '13 at 11:58

Christoph

50,121
21
99
128

In this example, it's an array of objects. – MattDiamant Dec 09 '13 at 20:53
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. – MattDiamant Dec 09 '13 at 21:01
@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. – Christoph Dec 10 '13 at 07:14
Could you share your definition of a multidimensional array? – Dec 10 '13 at 09:19
@wared Well, in other languages you can write something similar to `String[][] myStringArray = new String [x][y];`. This feels much more like a true multi-dim array. You don't have the opportunity for such an initialisation in JS. – Christoph Dec 10 '13 at 09:45
@wared I didn't say, that this is a definition. What do you actually want to hear? – Christoph Dec 10 '13 at 10:19
I would like you to explain this assertion saying that javascript has no multidimensional arrays. It seems to me that this notation, `Type[][]`, is just a type declaration meaning "an array of arrays of Types" rather than a type on its own. Actually, I wonder whether I'm right or wrong, that's why I've requested your opinion on that point. Please forgive my bad english :) – Dec 10 '13 at 11:07
@Christoph You are correct that using `Arrays` like this is bad practice for beginners. I was just explaining that it wouldn't throw an error, and then explaining some of the unexpected or confusing results that come from this common mispractice. – MattDiamant Dec 10 '13 at 18:20
1

@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)](http://stackoverflow.com/questions/597720/what-is-differences-between-multidimensional-array-and-array-of-arrays-in-c). – MattDiamant Dec 10 '13 at 18:31
In javascript, everything is an object that can have properties, even Arrays are Objects, so you can come up with crazy structures: an Array of Arrays of Objects, etc, and do it on the fly. You can do `var a = "hats"; a.__proto__.left = {}; a.left.dance = function () { this.state = 'dancing'; }` which is a String with an Object that has a property which is a Function. This allows you to create basically any structure imaginable (for good or evil), but when it comes down memory structure and set rules, this is something important to multidimensional arrays, and javascript doesn't follow them. – MattDiamant Dec 10 '13 at 19:23

score 0 · Answer 2 · answered Dec 09 '13 at 11:59

0

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

answered Dec 09 '13 at 11:59

developer82

13,237
21
88
153

score 0 · Answer 3 · answered Dec 09 '13 at 12:05

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.

score 0 · Answer 4 · 2013-12-09T21:24:21.263

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.

How to create javascript multi dimensional array?

4 Answers4