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
– Krishna Karki, Commented Dec 9, 2013 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
– Karl-Johan Sjögren, Commented Dec 9, 2013 at 11:57

Christoph · Accepted Answer · 2013-12-09 12:12:58Z

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 9, 2013 at 12:12

answered Dec 9, 2013 at 11:58

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

MattDiamant Over a year ago

In this example, it's an array of objects.

MattDiamant Over a year ago

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 Over a year ago

@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 Over a year ago

Could you share your definition of a multidimensional array?

MattDiamant Over a year ago

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

|

developer82 · Accepted Answer · 2013-12-09 11:59:51Z

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 9, 2013 at 11:59

developer82

13.8k24 gold badges95 silver badges166 bronze badges

Comments

Andy · Accepted Answer · 2013-12-09 12:05:12Z

0

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.

answered Dec 9, 2013 at 12:05

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

score 0 · Accepted Answer · 2013-12-09 21:24:21Z

0

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.

edited Dec 9, 2013 at 21:24

answered Dec 9, 2013 at 20:52

user1636522

Collectives™ on Stack Overflow

How to create javascript multi dimensional array?

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

10 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related