Multidimensional Array - creating a table

Question

I'm trying to create a table of all the zodiac symbols with their years underneath (12 columns, n rows, dates range from 1912 to 2013) using multidimensional arrays.

I have my code below and that's where I'm completely stuck.

My code:

<script>
    // declaring a 2D array
    var signs = new Array(12);
    for (var ndx = 0; ndx < 12; ndx++) {
        signs[ndx] = new Array(2);
    }

    // The names first
    signs[0][0] = "Rat";
    signs[1][0] = "Ox";
    signs[2][0] = "Tiger";
    signs[3][0] = "Rabbit";
    signs[4][0] = "Dragon";
    signs[5][0] = "Snake";
    signs[6][0] = "Horse";
    signs[7][0] = "Goat";
    signs[8][0] = "Monkey";
    signs[9][0] = "Rooster";
    signs[10][0] = "Dog";
    signs[11][0] = "Pig";

    // Next the image file names
    signs[0][1] = "rat.gif";
    signs[1][1] = "ox.gif";
    signs[2][1] = "tgr.gif";
    signs[3][1] = "rbt.png";
    signs[4][1] = "drgn.png";
    signs[5][1] = "snk.png";
    signs[6][1] = "hrs.gif";
    signs[7][1] = "gt.gif";
    signs[8][1] = "mnky.png";
    signs[9][1] = "rstr.gif";
    signs[10][1] = "dog.gif";
    signs[11][1] = "pig.gif";

    document.write("<h2>");
    document.write("</h2>");

    document.writeln("<table border= '0' width = '100%'>");
    document.writeln("<tr>");


    for (var i = 0; i < SignNames.length; i++) {
        document.writeln("<td>");
        document.writeln(SignNames[i] + "<br />");
        document.writeln("<img src='Images/" + SignImages[i] + "'/>");
        document.writeln("</td>");
    }
    document.writeln("</tr>");

    document.writeln("<tr>");
    for (var i = 1912; i <= new Date().getFullYear(); i++) {
        document.writeln("<td>" + i + "</td>");

        tableCols++;
        if (tableCols == 12) {
            tableCols = 0;
            document.writeln("</tr>");
        }
    }

    document.writeln("</table>");
</script>

Answer 1

First, I'd prefer if you defined your data like this:

var signs = [
  { name: "rat", image: "rat.gif" },
  { name: "ox", image: "ox.gif" },
  ...
  { name: "pig", image: "pig.gif" } // note: no trailing comma here
};

Then you can write signs[0].name to access the name. That's easier to read.

Now the only thing left to fix is that you replace SignNames with signs, since that's the name of your array.

Answer 2

The obvious problem in your code is that you declare an array called signs and then later in your for loop try to access it as SignNames. You need to match up the variable names. You're also using a variable tableCols that is never declared and initialised. I think this is what you're looking for:

document.writeln("<table border= '0' width = '100%'>");
document.writeln("<tr>");

for (var i = 0; i < signs.length; i++) {
    document.writeln("<td>");
    document.writeln(signs[i][0] + "<br />");
    document.writeln("<img src='Images/" + signs[i][1] + "'/>");
    document.writeln("</td>");
}
document.writeln("</tr>");

document.writeln("<tr>");
var tableCols = 0; // <---- this variable wasn't initialised in your code
for (var i = 1912, d = new Date().getFullYear(); i <= d; i++) {        
    document.writeln("<td>" + i + "</td>");
    if (++tableCols == 12) {
        tableCols = 0;
        document.writeln("</tr>");
    }
}
document.writeln("</table>");

Demo: http://jsbin.com/IZUnoSu/1/edit

Also your array initialisation is more complicated than necessary. You don't need to use new Array(12) to create an array with 12 elements, you can just declare an empty array with signs = [] and then start adding to it. But even that is more complicated than you need because you can declare the whole thing in a single statement with a nested array literal:

var signs = [
      ["Rat","rat.gif"],
      ["Ox","ox.gif"],
      ["Tiger","tgr.gif"],
      ["Rabbit","rbt.png"],
      ["Dragon","drgn.png"],
      ["Snake","snk.png"],
      ["Horse","hrs.gif"],
      ["Goat","gt.gif"],
      ["Monkey","mnky.png"],
      ["Rooster","rstr.gif"],
      ["Dog","dog.gif"],
      ["Pig","pig.gif"]
    ];