Two Dimensional Arrays

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="Two Dimensional Arrays, creating two dimensional arrays in javascript, how to create"> <meta name="Description" content="Two Dimensional Arrays - explains two dimensional arrays, how to create and visualize them."> <link rel="canonical" href="https://www.quackit.com/javascript/tutorial/two_dimensional_arrays.cfm"> <title>Two Dimensional Arrays</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">Two Dimensional Arrays</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <ul class="pager"> <li><a href="/javascript/tutorial/javascript_arrays.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> JavaScript Arrays</a></li> <li><a href="/javascript/tutorial/innerhtml_in_javascript.cfm">innerHTML <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> <p class="lead">JavaScript doesn't support two dimensional arrays. However, you can emulate a two dimensional array. Here's how.</p> <h3>Visualizing Two Dimensional Arrays</h3> <p>Whereas, one dimensional arrays can be visualized as a stack of elements, two dimensional arrays can be visualized as a multicolumn table or grid.</p> <p>For example, we could create a two dimensional array that holds three columns of data; a question, an answer, and a topic.</p> <table class="tabular"> <tr> <th colspan="4"><b>Two Dimensional Array</b></th> </tr> <tr> <td width="10%">0</td> <td width="30%">Arrays</td> <td width="30%">What is an array?</td> <td width="30%">An ordered stack of data</td> </tr> <tr> <td width="10%">1</td> <td width="30%">Arrays</td> <td width="30%">How to create an array?</td> <td width="30%">Assign variable name to array object, then assign values to the array.</td> </tr> <tr> <td width="10%">2</td> <td width="30%">Arrays</td> <td width="30%">What are two dimensional arrays?</td> <td width="30%">An ordered grid of data</td> </tr> </table> <div class="ad">  <div data-fuse="23059883629"></div> </div> <h3>Creating Two Dimensional Arrays</h3> <p>Generally, creating two dimensional arrays is very similar to creating one dimensional arrays. Some languages allow you to create two dimensional arrays simply by adding an index item, however JavaScript doesn't support two dimensional arrays. </p> <p>JavaScript, does however, allow you to emulate a two dimensional array. You can do this by creating an "array of an array". </p> <p>To do this, you create an array, loop through the array, and for each element, you create another array. Then, you simply add an index for each column of your grid. In JavaSript this would look something like this:</p> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/javascript/javascript.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false">var faq = new Array(3)

for (i=0; i &lt;3; i++)
faq[i]=new Array(3)

faq[0][1] = "Arrays"
faq[0][2] = "What is an array?"
faq[0][3] = "An ordered stack of data"

faq[1][1] = "Arrays"
faq[1][2] = "How to create an array?"
faq[1][3] = "Assign variable name to array object, then assign values to the array."

faq[2][1] = "Arrays"
faq[2][2] = "What are two dimensional arrays?"
faq[2][3] = "An ordered grid of data"</textarea> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/javascript", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>Result:</p> <table class="tabular"> <tr> <td width="10%">0</td> <td width="30%">Arrays</td> <td width="30%">What is an array?</td> <td width="30%">An ordered stack of data</td> </tr> <tr> <td width="10%">1</td> <td width="30%">Arrays</td> <td width="30%">How to create an array?</td> <td width="30%">Assign variable name to array object, then assign values to the array.</td> </tr> <tr> <td width="10%">2</td> <td width="30%">Arrays</td> <td width="30%">What are two dimensional arrays?</td> <td width="30%">An ordered grid of data</td> </tr> </table> <ul class="pager"> <li><a href="/javascript/tutorial/javascript_arrays.cfm"><i class="fa fa-long-arrow-left" aria-hidden="true"></i> JavaScript Arrays</a></li> <li><a href="/javascript/tutorial/innerhtml_in_javascript.cfm">innerHTML <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/javascript/tutorial/">JavaScript Tutorial</a></h3> <ul> <li><a href="/javascript/tutorial/introduction.cfm">Introduction</a></li> <li><a href="/javascript/tutorial/how_to_enable_javascript.cfm">How to Enable JavaScript</a></li> <li><a href="/javascript/tutorial/javascript_syntax.cfm">JavaScript Syntax</a></li> <li><a href="/javascript/tutorial/javascript_popup_boxes.cfm">JavaScript Popup Boxes</a></li> <li><a href="/javascript/tutorial/javascript_html.cfm">JavaScript and HTML</a></li> <li><a href="/javascript/tutorial/external_javascript_file.cfm">External JavaScript File</a></li> <li><a href="/javascript/tutorial/javascript_operators.cfm">JavaScript Operators</a></li> <li><a href="/javascript/tutorial/javascript_variables.cfm">JavaScript Variables</a></li> <li><a href="/javascript/tutorial/javascript_functions.cfm">JavaScript Functions</a></li> <li><a href="/javascript/tutorial/javascript_events.cfm">JavaScript Events</a></li> <li><a href="/javascript/tutorial/javascript_if_statements.cfm">JavaScript If Statements</a></li> <li><a href="/javascript/tutorial/javascript_switch_statement.cfm">JavaScript Switch Statements</a></li> <li><a href="/javascript/tutorial/javascript_while_loop.cfm">JavaScript While Loop</a></li> <li><a href="/javascript/tutorial/javascript_for_loop.cfm">JavaScript For Loop</a></li> <li><a href="/javascript/tutorial/javascript_try_catch.cfm">JavaScript Try Catch</a></li> <li><a href="/javascript/tutorial/javascript_escape_characters.cfm">JavaScript Escape Characters</a></li> <li><a href="/javascript/tutorial/javascript_void_0.cfm">JavaScript Void(0)</a></li> <li><a href="/javascript/tutorial/javascript_cookies.cfm">JavaScript Cookies</a></li> <li><a href="/javascript/tutorial/javascript_date_and_time.cfm">JavaScript Date and Time</a></li> <li><a href="/javascript/tutorial/javascript_arrays.cfm">JavaScript Arrays</a></li> <li><a href="/javascript/tutorial/two_dimensional_arrays.cfm">Two Dimensional Arrays</a></li> <li><a href="/javascript/tutorial/innerhtml_in_javascript.cfm">JavaScript innerHTML</a></li> <li><a href="/javascript/tutorial/unobtrusive_javascript.cfm">Unobtrusive JavaScript</a></li> <li><a href="/javascript/tutorial/javascript_summary.cfm">JavaScript Summary</a></li> </ul> </li> <li><h3>JavaScript Reference</h3> <ul> <li><a href="/javascript/examples/" title="">JavaScript Examples</a></li> <li><a href="/javascript/javascript_reserved_words.cfm" title="">JavaScript Reserved Words</a></li> <li><a href="/javascript/javascript_event_handlers.cfm" title="Introduction to the 12 JavaScript event handlers">JavaScript Event Handlers</a></li> <li><a href="/javascript/javascript_date_and_time_functions.cfm" title="Full listing of all JavaScript methods for dealing with date and time.">JavaScript Date and Time Functions</a></li> </ul> <li><h3>jQuery</h3> <ul> <li><a href="/jquery/tutorial/" title="">jQuery Tutorial</a></li> <li><a href="/jquery/examples/" title="">jQuery Examples</a></li> </ul> </li> <li><h3>JSON</h3> <ul> <li><a href="/json/tutorial/" title="Data format for exchanging data between applications and different environments.">JSON Tutorial</a></li> </ul> <li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

Two Dimensional Arrays