DONATE  
MENU
MYSQL
JSON
JAVASCRIPT
CSS
AJAX
PHP
HTML

JavaScript Tutorials

INTRODUCTION

» Introduction to JavaScript

» Practice IT Editor

» JavaScript Example

» JavaScript Placement

» JavaScript Syntax

» JavaScript Statements

» JavaScript Input

» JavaScript Output

» JavaScript Comments

» JavaScript Variables

» Variables' Scope

» JavaScript Operators

» JS Expressions & Concatenation

» JavaScript Data Type

» JavaScript Numbers

» Number Object

» JavaScript Strings

» String Object

» JavaScript Booleans

» Boolean Object

» JavaScript Functions

» JavaScript Arrays

» Array Object - Properties

» Array Object - Methods

» JavaScript Objects

» JavaScript Undefined

» JavaScript Nulls

CONDITIONAL TESTING

» If Statement

» If Else Statement

» JavaScript Ternary Operator

» Switch Statement

LOOPS

» For Loops

» While Loops

» Break & Continue

» For...In Loops

» do...while Loop

FUNCTIONS

» JavaScript Functions

» Creating Functions

» Functions' Parameters

» Functions' Arguments

» Function Invocation

» The Return Keyword

» The Arguments Object

» Callback Functions

» Arrow Functions

ARRAYS

» JavaScript Arrays

» Creating Arrays

» Accessing Arrays

» Looping Arrays

» Multi - dimensional Arrays

OBJECTS

» JavaScript Objects

» Creating Objects

» Prototype Definition

» Accessing Objects

» The this Keyword

AJAX

» Introduction to AJAX

JSON

» Introduction to JSON

JAVASCRIPT DATES

» The Date Object

» Date Methods

» Timing (SetInterval & SetTimeout)

MATH OBJECT

» Math Object

» Math Methods

HTML / JS DOM

» DOM Introduction

» Accessing HTML Elements in DOM

» Get And Change Elements' Contents & Values

» Change Styling - DOM CSS

» DOM Attributes

» JavaScript Event Listeners

» DOM Event Listeners

» JS Events

MISCELLANEOUS

» JS Strict Mode

» JavaScript Hoisting

» JavaScript let keyword

» Reserved Keywords

» JS Best Practices

» JavaScript vs ECMAScript

JAVASCRIPT EXAMPLES

» JavaScript Calculator

.. » JavaScript » Arrays » Multi - dimensional Arrays
Share Tweet WhatsApp

Multi - dimensional Arrays

Multi dimensional arrays just as the name suggests are arrays that have other array(s) as values. In this case, if we access any of it array values, we still need to access the values contained in that particular array value. Multidimensional arrays can sometimes be really multidimensional when you have an array that is more than four times deeper. A SIMPLE MULTI DIMENSIONAL ARRAY
var arr = new Array(["HTML", 35, 12], ["CSS", 24, 2], ["JS", 42, 2]);
Above is an example of a multidimensional array. There, we have an array having 3 values, which are all arrays. If we loop through the array, each of the values will be individual arrays.
arr[0]; //will return ["HTML", 35, 12] - An array
arr[1]; //will return ["CSS", 24, 2] - An array
arr[2]; //will return ["JS", 42, 2] - An array
We therefore still need to loop through the individual values in order to access the final values contained in them. For example, the first value when accessed with arr[0] will be an array, ["HTML", 35, 12] We therefore need to use the index number of its values to access them like,
arr[0][0]; //HTML
arr[0][1]; //35
arr[0][2]; //12
So, you can see from the example how dimensional not only the array has gone but accessing its values has become. The first 0 is the index number to access ["HTML", 35, 12] while the other index numbers in front are to access each final value e.g HTML, 35 and 12. LOOPING THROUGH THE VALUES To loop through and get the values of any array contained in a multidimensional array, you will have to continuously loop through using for loops with different initialized variables till you reach the value(s) you want. Now, let's loop through the array example above and get all the values one by one.
<script>
var arr = new Array(["HTML", 35, 12], ["CSS", 24, 2], ["JS", 42, 2]);  //The multidimensional array

var len = arr.length; //Length of the multidimensional array

for (i = 0; i < len; i++){ //for loop to access the arrays in the multidimensional array

var arrValue = arr[i]; //Array value in the multidimensional array

var newlen = arrValue.length;  //Length of array value in the multidimensional array

for (j = 0; j < newlen; j++){//for loop to get values of the  array in the multidimensional array

alert(arr[i][j]); //alerting each value

}
}
</script>

Copy PRACTICE IT

Notice that for the first loop, the initialized variable is i and for the second, the initialized variable is j. The initialized variable for a loop nested inside another should be different to avoid interruption. Multidimensional arrays may look complicated for a beginner but don't worry much, you will naturally understand them as you gain more experience using JavaScript.
<script>
var choices = "";
var question = ["What is the full meaning of JS?", ["JS", "Justice", "JavaScript", "None of the above"], "JavaScript"];
for (var i=0; i<question[1].length; i++){
choices += "<input name='choice' type='radio' onclick=\"mark('"+question[1][i]+"','"+question[2]+"')\"/>"+question[1][i]+"<br/>";
}
document.write("<p><b>"+question[0]+"</b></p><div>"+choices+"</div>");

function mark(choice, answer){
if (choice == answer){
alert("Correct");
}
else
{
alert("Wrong");
}
}
</script>

Copy PRACTICE IT

In the above, we created an array to contain all information about a question. This includes the question itself, an array to contain different choices possible for the question and finally, a answer to the question. First, we accessed the array containing the choices for the question using question[1] and looped through it to build a set of radio buttons, a user can click upon to select a choice. We thereafter displayed the question, the built radio buttons and then, a function to check if a choice is correct or not. The above can be made more advance by having the question array in another array alongside other questions.
<div id='question'></div>
<div id='placeholder'></div>
<script>
function setQuestion(num){
var choices = "";
var questions = [["An array is access with _.",["an index number", "a name", "other factors", "depends on array"], "an index number"], ["Which of this is not an array?",["{5,7,3}", "[1,3,4]", "[SB, Tutorials]", "new Array(13,2,4)"],"{5,7,3}"], ["What is the full meaning of JS?", ["JS", "Justice", "JavaScript", "None of the above"], "JavaScript"]];
var question = questions[num];
for (var i=0; i<question[1].length; i++){
choices += "<input name='choice' type='radio' onclick=\"mark('"+question[1][i]+"','"+question[2]+"')\"/>"+question[1][i]+"<br/>";
}
document.getElementById("question").innerHTML = "<p><b>"+question[0]+"</b></p>";
document.getElementById("placeholder").innerHTML = "<div>"+choices+"</div><p>"+(questions[num-1] !== undefined?"<button onclick='setQuestion("+(num-1)+")'>PREVIOUS</button>":"")+(questions[num+1] !== undefined?"&nbsp;&nbsp;<button onclick='setQuestion("+(num+1)+")'>NEXT</button>":"")+"</p>";
}

function mark(choice, answer){
if (choice == answer){
alert("Correct");
}
else
{
alert("Wrong");
}
}

setQuestion(0);
</script>

Copy PRACTICE IT

The difference between the above and the example before it is that instead of having information about just one question, we had information about multiple questions contained in an array known as questions. We therefore need to access a particular question by going through the "questions" array. This, we did with the help of a function whose argument should be the index number of the question to access e.g 0 will return an array containing information about the first question in the array. Once the question is accessed, we process it just the way we did to a question in the previous example. To have the next button, we added one(1) to the index number of the current question and check if it exists in the questions array i.e it is not undefined. If it does exist, then, there is a next question. The next button should be display then and on clicking on it, it should return that question. We achieved all these with a ternary operator. Same goes with the previous button. The difference is that you deduct one(1) instead of adding and check if it exists in the array. SUMMARY
  1. Multidimensional arrays are arrays that contain other arrays as values.
  2. In this case, to loop through its values, we need to first loop through the main array and then, loop through the array(s) inside of it.
  3. While looping, the initialized variable of each loop should have different names.
  4. A multidimensional array can be deeper to any extent e.g an array having an array value that also has another array value and so on. The deeper it goes, the more complex it becomes.
Take a short quiz on Multi - dimensional Arrays.
Ask a question or tell us if Multi - dimensional Arrays is easy or not.
cent?

Join our 1,090 subscribers to receive tutorials' updates!

  We won't spam your mail box. We hate it.





StackBeginner 2021 © Joseph Omamode