2D Arrays in Javascript

Question

For college, we have a problem to solve regarding 2D arrays, however the nature of them has never been cover in class. I've scoured this site for answers(which might be evident in my code) but cannot get it to work, or even truly understand what is going on or why. The exact question is:

Write a program that utilises a 8x8 2-dimensional array.  
(a) Initialise the array elements via nested for loops as follows

1  2  3  4  5  6  7  8
9  10 11 12 13 14 15 16
17 18 19 20 21 22 23 24
25 26 27 28 29 30 31 32
...
...
57 58 59 60 61 62 63 64

(b) Add some code that will display all array elements in an 8x8 HTML table.

(c) Use nested for loops for calculating the sum and the average of the
    values stored in the array.
    Let a function display these values on screen eg use alert().   

---

The code I have so far is :

x = matrix( 8 , 8, 0 ); // 8 lines, 8 cols filled with empty string

function matrix( rows, cols, defaultValue){

   var arr = [];

     // Creates all lines:
     for(var i=0; i < rows; i++){

     var add = 1 

    // Creates an empty line
     arr.push([]);

      // Adds cols to the empty line:
     arr[i].push( new Array(cols));

        for(var j=0; j < cols; j++){
        // Initializes:
            arr[i][j] = defaultValue + add;
         }
  var add = add + 1
 }
    return arr;
}

function displayInDiv() {
  var output_string_ = "" ;
  var lastElement = 64 ;


output_string_ = output_string_
                +'<table>'
                +'<tr>'
                +'<th width="11%" align="left">ARRAY INDEX</th>'
                +'<th width="11%" align="right"> array_1</th>'
                +'<th width="11%" align="right"> array_2</th>'
                +'<th width="11%" align="right"> array_3</th>'
                +'<th width="11%" align="right"> array_4</th>'
                +'<th width="11%" align="right"> array_5</th>'
                +'<th width="11%" align="right"> array_6</th>'
                +'<th width="11%" align="right"> array_7</th>'
                +'<th width="11%" align="right"> array_8</th>'
                +'</tr>'
                ;

for ( var i = 1 ; i < 9 ; i++ ) { 

    for ( var j = 0 ; j < 7 ; j++ ) {

    output_string_ = output_string_
                    +'<tr id="table_row_'
                    + i
                    +'">'
                    +'<td width="11%" align="left">'
                    +'['
                    + i
                    +']'
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'<td width="11%" align="right">'
                    + Array[i][j]
                    +'</td>'
                    +'</tr>'
                    ;
}

    output_string_ = output_string_
                +'<table>'
                ;


var output_section_ = document.getElementById("list_");
output_section_.innerHTML = output_string_ ; 

}
}

---

Sorry for the huge text dump, but i'm completely stumped. Any help would be greatly appreciated.

Answer 1

I believe the exact code you're looking for is this

var outer = new Array();

for(var i = 0; i < 8; i++) {
  var inner = new Array
  for(var j = 0; j < 8; j++) {
    inner[j] = (i * 8) + j + 1;
  }
  outer[i] = inner;
}

console.log(outer);

A 2D array is just an array of arrays, here I labelled them inner and outer.

There are 8 inner arrays of length 8, giving you 64 total entries. The value of each entry is 8 * the outer index (which starts at 0), plus the inner index plus 1 (because it also starts at 0).

This should give you enough information to answer parts b and c yourself, but feel free to comment below if you'd like further help. :)

Answer 2

answer for (a)

var arr = [];
var value = 0;
for(var i = 0; i < 8; i++){
  var tempArr = [];
  for(var j = 0; j < 8; j++){
    tempArr.push(++value);
  }
  arr.push(tempArr);
}

//`arr` has values initialized with 1 - 64

---

answer for (b)

   var table = "<table>";

   for(var i = 0; i < 8; i++){
      table += "<tr>";
      for(var j = 0; j < 8; j++){
        table += "<td>" + arr[i][j] + "</td>";
      }
      table += "</tr>";
    }
    table += "</table>";

//assume you have an element with id="tbl" in DOM
document.getElementById("tbl").innerHtml = table;

answer for (c)

 var sum = 0 , avg = 0;
   for(var i = 0; i < 8; i++){          
      for(var j = 0; j < 8; j++){
        sum += arr[i][j];
      }
    }
  avg = sum / 64;

 alert("sum: " + sum + " Average: " + avg);