Creating and Accessing 2-dimensional arrays in javascript

Question

I'm confused about how to create and access 2-dimensional arrays in javascript. Below is an array declaration in which I'm storing names of people and then the src for their image. When I try to access myArray[0][0] element I get 'D' and when I try to access myArray[0,0], I get Donald Duck. How can I access the img src myArray[0][0] = "assets/scrybe.jpg" ?

JS code:

var myArray = new Array(1);

myArray[0] = "Donald Duck";
myArray[1] = "Winnie Pooh";
myArray[2] = "Komal Waseem";
myArray[3] = "Hockey";
myArray[4] = "Basketball";
myArray[5] = "Shooting";
myArray[6] = "Mickey Mouse";

myArray[0][0] = "assets/scrybe.jpg";
myArray[1][0] = "assets/scrybe.jpg";
myArray[2][0] = "assets/scrybe.jpg";
myArray[3][0] = "assets/scrybe.jpg";
myArray[4][0] = "assets/scrybe.jpg";
myArray[5][0] = "assets/scrybe.jpg";
myArray[6][0] = "assets/scrybe.jpg";

I don't think you want a 2-dimensional array. I think you want an array of objects, such that each object has a "name" and an "image" property. — Pointy
– Pointy, Commented Sep 29, 2012 at 12:58
What you are actually doing is "Donald Duck"[0] = "assets/scrybe.jpg" - which obviously can't work — Bergi
– Bergi, Commented Sep 29, 2012 at 13:03

David G · Accepted Answer · 2012-09-29 13:15:01Z

16

Firstly, to create an array, it's better to use the square bracket notation ( [] ):

var myArray = [];

This is the way you emulate a multi-demensional array in JavaScript. It's one or more arrays inside an array.

var myArray = [
    [], [] // two arrays
];

If you're asking if there's a way to declare an array as multi-dimensional, then no, there isn't. You can access them like this:

myArray[0][0]; // the 1st element of the first array in myArray
myArray[1][1]; // the 2nd element of the second array in myArray

Here is the code you were probably looking for:

var myArray = [
    ["Donald Duck", "assets/scrybe.jpg"],
    ["Winnie Pooh", "assets/scrybe.jpg"],
    ["Komal Waseem", "assets/scrybe.jpg"]
    [/* and so on...*/]
];

But since you're giving all the names the same URL, then you can use a for loop instead to do this faster:

for (var i = 0; i < myArray.length; i++) {
    myArray[i][1]  = "assets/scrybe.jpg";
}

edited Sep 29, 2012 at 13:15

answered Sep 29, 2012 at 13:01

David G

97.6k41 gold badges173 silver badges258 bronze badges

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

1 Comment

chatay Over a year ago

@0x499602D2 any chance you tell us how to access the array length or size or other options. I created a dimensional array as you suggested. However I can not access the length of the array. Any suggestion?

var GenreArray#counter# = [ 					    [], [] 					];  			<cfoutput>	 			 			<cfset i = i + 1> 			 			GenreArray#counter#[#i#] = "#Title#"; 			 			for (var i = 0; i < myArray.length; i++) { 				<cfset counterForTime = counterForTime + 1> 				GenreArray#counter#[#i#][#counterForTime#] = "#SuitableTime#"; 				} 				 			</cfoutput> 			</cfoutput>

Pointy · Accepted Answer · 2012-09-29 12:59:30Z

7

Perhaps what you really want is an array of objects:

var myArrray = [
  { name: "Donald Duck", image: "assets/scrybe.jpg" },
  { name: "Winnie Pooh", image: "assets/scrybe.jpg" },
  // ...
];

JavaScript doesn't really have 2-dimensional arrays, as such. What you can do is create an array such that each element is also an array.

var twoDim = [ [], [], [], [], [] ];

In your case, however, I don't think that structure will help much.

answered Sep 29, 2012 at 12:59

Pointy

415k62 gold badges600 silver badges631 bronze badges

3 Comments

JackTheKnife Over a year ago

Fair enough answer with an array of objects but no answer how to access them.

Pointy Over a year ago

@JackTheKnife ?? you access the array elements the same way you access any array element, with the [ ] operator.

KargWare Over a year ago

To access the a multi dim array with a for-loop myArrray.forEach((item) => { let n = item.name; let i = item.image; ... });

sajawikio · Accepted Answer · 2012-09-29 12:59:39Z

0

No it cannot be done like that. Must either do:

var myArray = new Array(1);

myArray[0] = new Array(1);

myArray[0][0] = "Donald Duck";
myArray[0][1] = "assets/scrybe.jpg";

Or use JS syntax

var myJSObj = {"Donald" :"assets/scrybe.jpg", "Donald2": "assets/scrybe2.jpg" };

answered Sep 29, 2012 at 12:59

sajawikio

1,5147 silver badges12 bronze badges

Comments

Quentin Del · Accepted Answer · 2017-03-15 16:34:27Z

0

I had the same issues and I used minBy from Lodash

https://lodash.com/docs/4.17.4#minBy

var objects = [{ 'n': 1 }, { 'n': 2 }];

_.minBy(objects, function(o) { return o.n; });
// => { 'n': 1 }

// The `_.property` iteratee shorthand.
_.minBy(objects, 'n');
// => { 'n': 1 }

answered Mar 15, 2017 at 16:34

Quentin Del

1,6953 gold badges21 silver badges34 bronze badges

Collectives™ on Stack Overflow

Creating and Accessing 2-dimensional arrays in javascript

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related