//PROCESS: Using two dimensional arrays and nested loops

<New code>

//PROCESS: — loops through each part of a two-dimensional array

//PROCESS: use a nested loop to go through the rows and columns of the two-dimensional array
var loopThroughArray = function ( exampleArray ) {
	for ( row in exampleArray ) {			// loop through each row of the array
		for ( column in exampleArray[ row ] ) {	// loop through each column of that row
			// do something with exampleArray[ row ][ column ]

		}
	}
}

Using nested loops and a two-dimensional array to create a grid

Two-dimensional arrays are terrific for holding grid-based info.

For example, let's say that I want to create a black and white pixelated grid of a smiley face. I would start off by defining a two-dimensional grid of zeroes and ones:

// INIT: initialize the array that holds the grid pattern
// Complex data structures combine arrays and objects 
// This one is an array of arrays -- a two-dimensional array
// In this example, the array holds a bitmap smiley face
var imageGridArr    =[  // rows 0-7, columns 0-8
	[0,1,1,1,1,1,1,1,0], // row 0 = mazeArr [ 0 ]
	[1,0,0,0,0,0,0,0,1], // row 1 = mazeArr [ 1 ]
	[1,0,1,0,0,0,1,0,1], // row 2 = mazeArr [ 2 ]
	[1,0,0,0,0,0,0,0,1], // row 3 = mazeArr [ 3 ]
	[1,0,1,0,0,0,1,0,1], // row 3 = mazeArr [ 4 ]
	[1,0,0,1,1,1,0,0,1], // row 4 = mazeArr [ 5 ]
	[1,0,0,0,0,0,0,0,1], // row 5 = mazeArr [ 6 ]
	[0,1,1,1,1,1,1,1,0]  // row 6 = mazeArr [ 7 ]
];

Then I would create a function that would process this two-dimensional array into a bunch of carefully positioned and styled <div> elements.

  1. Declare an empty string variable to hold the HTML code for the <div> elements.
  2. Use for ( row in exampleArray) to loop through each row in the two-dimensional array
  3. Nested inside the loop, use for ( column in exampleArray[ row ]) to loop through each column of the current row
  4. Inside both loops, declare an empty string variable to hold style information
  5. Use an if...else statement to change the style depending on the value of exampleArray[ row ][ column ]
  6. Create and add a <div> to the HTML code, including the style information and custom positioning
  7. Calculate the top position as row * divHeight
  8. Calculate the top position as column * divWidth
  9. When the loops are finished, return the variable holding the <div> code from the function

For example

...is created with the following code:

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Using two dimensional arrays and nested loops</title>
        <meta name="description" content="Learn how use two dimensional arrays and nested loops">
        <meta name="author" content="Dave Drapak">
        <style>
            .outputClass div {
                position:   fixed;
                width:      30px;
                height:     30px;
                border:     1px solid black;
            }
        </style>
    </head>

    <body>
        <div class="outputClass" id="outputID"></div>
        <p>
            <button id="buttonID">
                Click to create a grid using two dimensional arrays
            </button>
        </p>
        
        <script>
            // INIT: initialize the array that holds the grid pattern
            // Complex data structures combine arrays and objects 
            // This one is an array of arrays -- a two-dimensional array
            // In this example, the array holds a bitmap smiley face
            
            var imageGridArr    =[  // rows 0-7, columns 0-8
                [0,1,1,1,1,1,1,1,0], // row 0 = mazeArr [ 0 ]
                [1,0,0,0,0,0,0,0,1], // row 1 = mazeArr [ 1 ]
                [1,0,1,0,0,0,1,0,1], // row 2 = mazeArr [ 2 ]
                [1,0,0,0,0,0,0,0,1], // row 3 = mazeArr [ 3 ]
                [1,0,1,0,0,0,1,0,1], // row 3 = mazeArr [ 4 ]
                [1,0,0,1,1,1,0,0,1], // row 4 = mazeArr [ 5 ]
                [1,0,0,0,0,0,0,0,1], // row 5 = mazeArr [ 6 ]
                [0,1,1,1,1,1,1,1,0]  // row 6 = mazeArr [ 7 ]
            ];

            var mainProcedure = function () {   // triggered by button
                console.log("in mainProcedure...");
                
                var gridCode    = createGridCode( imageGridArr );
                outputGridCode( gridCode );
            }
            
            //PROCESS:  This uses a nested loop to create the HTML code 
            //          to place the <div>s in the correct row and column
            var createGridCode = function ( gridArr ) { 
                console.log("in createGridCode..." + gridArr);

                var gridCode = ""; //define a string to hold all the HTML for the grid

                // loop through each row of the array...
                for ( row in gridArr ) {
                    // loop through each column of this array row
                    for ( column in gridArr [ row ] ) {     
                    
                        var divStyle = "";  // define an empty string to hold the div style
                        
                        // if the array holds 0, then use a black background
                        if ( gridArr[ row ][ column ] == 0 ) {      
                            divStyle = "background-color: black;"
                        // if the array holds 1, then use a white background
                        } else {                                    
                            divStyle = "background-color: white;"
                        }
                    
                        // combine the elements to create HTML code. EXAMPLE: 
                        //  
                        //  <div style='color: white; background-color: black; 
                        //      top: 30px; left: 30px;'>
                        //  </div>
                        gridCode = gridCode 
                            + "<div style='"
                            + divStyle
                            + "top: "
                            // calculate a position for each cell being 30px tall
                            + row * 30      
                            + "px; left: "
                            // calculate a position for each cell being 30px wide
                            + column * 30   
                            +"px;'></div>"
                    }
                }

                return gridCode;    // return the HTML grid code from this function
            }
            

            //OUTPUT: this puts the grid information inside the div called outputID
            var outputGridCode = function ( htmlCode ) {  
                console.log( "in outputGridCode..." + htmlCode );
                
                document.getElementById("outputID").innerHTML = htmlCode;
            }
            
            //INPUT: make the button trigger mainProcedure
            document.getElementById('buttonID').onclick = mainProcedure;
        </script>
    </body>
</html>

Live example: Draw a maze