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";

Answer 1

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";
}

Answer 2

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.