All geek questions in one place

2D Arrays in Javascript

In college, we have a problem for solving 2D arrays, however their nature has never been covered by class. I looked at this site for answers (which may appear in my code), but cannot make it work, or even really understand what is happening or why. Exact question:

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 at a dead end. Any help would be greatly appreciated.

+4
source share
6 answers

I believe the exact code you are looking for is

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 have designated them both internal and external.

8 8, 64 . 8 * - ( 0) 1 ( 0).

, b c , , .:)

+5

(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

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

(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);
+2

.

var myarray=new Array(8)

for (i=0; i <8; i++)
    myarray[i]=new Array(8)

, .

!

+1

JSFiddle .

HTML

<button onclick="showCalculations();">Show Calculations!</button>
<div id="container"></div>

JavaScript

//Create the 2-d array
var rows = 8; //Number of rows
var columns = 8; //Number of columns
var list = []; //Array where we will put the data
var index = 0; //Keeps track of which index we're at

for(var i = 0; i < rows; i++){
  var rowList = []; //Create sub-array
  list.push(rowList); //Add the sub-array to our top-level array
  for(var y = 0; y < columns; y++){
    index++; //Increment the index
    rowList.push(index); //Add the index to the current sub-array
  }
}

//Create the Table as HTML string
var table = "<table>"; //Start HTML for table
for(var i = 0; i < list.length; i++){
  var row = list[i];
  table += "<tr>"; //Start HTML for row
  for(var y = 0; y < row.length; y++){
    var column = row[y];
    table += "<td>" + column + "</td>"; //Table cell with content
  }
  table += "</tr>"; //End HTML for row
}
table += "</table>"; //End HTML for table

document.getElementById("container").innerHTML = table; //Find element with id container and set HTML to table

//Calculations
var sum = 0; //Keeps track of the sum
var numberOfNumbers = 0; //Keeps track of how many numbers has been summed

for(var i = 0; i < list.length; i++){
  var row = list[i];
  for(var y = 0; y < row.length; y++){
    var column = row[y];
    sum += column; //Add to sum
    numberOfNumbers++; //Increment amount of numbers
  }
}

var avarage = sum / numberOfNumbers; //Calculate avarage

//Function to alert the values
function showCalculations(){
  alert("Sum: " + sum + "\nAvarage: " + avarage)
}

, for-loop. ( , ).

+1

var num;
var arr = [];

// This for loop populates the array
for (var i = 0; i <= 7; i++) {
  arr[i] = [];
  for (var j = 0; j <= 7; j++) {
    arr[i][j] = i * 8 + j + 1;
  }
}

//  This function displays the populated array
function displayArr(arr) {
  var container = document.getElementById("container");
  var append = "<table>";

  for (var i = 0; i < arr.length; i++) {
    append += "<tr>";

    for (var j = 0; j < arr[i].length; j++) {
      num = i * 8 + j + 1;
      append += "<td>" + num + "</td>";
    }

    append += "</tr>";
  }
  
  container.innerHTML = append;
}

//  Alerts the sum of all numbers in the 2d array
function getSum() {
  var sum = 0;
  for (var i = 0; i <= 7; i++) {
    for (var j = 0; j <= 7; j++) {
      sum += i * 8 + j + 1;
    }

  }
  return sum;
}


// Alerts the average of all numbers in the 2d array
function getAvg() {
  var totalNumbers = 0;
  var avg = 0;
  for (var i = 0; i <= 7; i++) {
    for (var j = 0; j <= 7; j++) {
      totalNumbers++;
    }

  }
  return getSum() / totalNumbers;
}


alert(getAvg());
alert(getSum());
displayArr(arr);
<section id="container"></section>
Hide result

EDIT * Added averages and summary functions

0
source

I am correcting your code. Html:

<button onclick='run()'>Show</button>
<div id='list_'></div>

And js:

function run() {
  x = matrix( 8 , 8, 0 ); 
  alert(x);
  displayInDiv(x);
}
function matrix( rows, cols, defaultValue){
    var arr = [];
    var number = 1;
    for(var i = 0; i < rows; i++){
        arr.push([]);
        arr[i].push( new Array(cols));
        for(var j=0; j < cols; j++){
            arr[i][j] = number;
            number++;
        }
    }
    return arr;
}

function displayInDiv() {
    var output_string_ = "" ;
    var lastElement = 64 ;
    var output_string_ = '<table>'
    for ( var i = 0 ; i < 8 ; i++ ) { 
        output_string_ += "<tr id='table_row_" + i + "'>";
        for ( var j = 0 ; j < 8 ; j++ ) {
            output_string_ += '<td width="11%" align="left">' + x[i][j] + '</td>';
        }
        output_string_ += '</tr>';
    }
    output_string_ += '</table>';

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

Source: https://habr.com/ru/post/1618606/

More articles:


All Articles