In JavaScript, arrays can contain other arrays, creating a multi-dimensional array or an array of arrays. To access elements inside an array of arrays, you use multiple bracket notation. Here\u2019s a guide on how to get and manipulate arrays inside an array:<\/p>\n\n\n\n
You can create an array of arrays by nesting arrays within a main array:<\/p>\n\n\n\n
let arrayOfArrays = [\n [1, 2, 3],\n [4, 5, 6],\n [7, 8, 9]\n];\n<\/pre><\/div>\n\n\n\n2. Accessing Elements in an Array of Arrays<\/strong><\/h3>\n\n\n\n
To access elements inside an array of arrays, use bracket notation twice: the first bracket to access the nested array, and the second to access the element within that nested array.<\/p>\n\n\n\n
Access a Nested Array:<\/strong><\/p>\n\n\n\n
let firstArray = arrayOfArrays[0]; \/\/ [1, 2, 3]\nlet secondArray = arrayOfArrays[1]; \/\/ [4, 5, 6]<\/pre><\/div>\n\n\n\nAccess an Element in a Nested Array:<\/p>\n\n\n\n
let firstElement = arrayOfArrays[0][0]; \/\/ 1\nlet secondElement = arrayOfArrays[1][2]; \/\/ 6<\/pre><\/div>\n\n\n\n3. Iterating Over an Array of Arrays<\/strong><\/h3>\n\n\n\n
You can use nested loops to iterate over an array of arrays.<\/p>\n\n\n\n
Using
for<\/code> Loop:<\/strong><\/p>\n\n\n\nfor (let i = 0; i < arrayOfArrays.length; i++) {\n for (let j = 0; j < arrayOfArrays[i].length; j++) {\n console.log(arrayOfArrays[i][j]);\n }\n}<\/pre><\/div>\n\n\n\nUsing
forEach<\/code> Loop:<\/p>\n\n\n\narrayOfArrays.forEach(innerArray => {\n innerArray.forEach(element => {\n console.log(element);\n });\n});\n<\/pre><\/div>\n\n\n\n4. Adding Elements to an Array of Arrays<\/strong><\/h3>\n\n\n\n
You can add elements to both the main array and the nested arrays.<\/p>\n\n\n\n
Add a New Nested Array:<\/strong><\/p>\n\n\n\n
arrayOfArrays.push([10, 11, 12]);\nconsole.log(arrayOfArrays);\n\/\/ Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]]<\/pre><\/div>\n\n\n\nAdd an Element to an Existing Nested Array:<\/p>\n\n\n\n
arrayOfArrays[0].push(0);\nconsole.log(arrayOfArrays[0]);\n\/\/ Output: [1, 2, 3, 0]<\/pre><\/div>\n\n\n\n5. Removing Elements from an Array of Arrays<\/strong><\/h3>\n\n\n\n
You can remove elements using methods like
pop<\/code>,shift<\/code>, orsplice<\/code>.<\/p>\n\n\n\nRemove a Nested Array:<\/strong><\/p>\n\n\n\n
let removedArray = arrayOfArrays.pop();\nconsole.log(removedArray); \/\/ [10, 11, 12]\nconsole.log(arrayOfArrays);\n\/\/ Output: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]<\/pre><\/div>\n\n\n\nRemove an Element from a Nested Array:<\/p>\n\n\n\n
let removedElement = arrayOfArrays[0].pop();\nconsole.log(removedElement); \/\/ 0\nconsole.log(arrayOfArrays[0]);\n\/\/ Output: [1, 2, 3]<\/pre><\/div>\n\n\n\nExample Usage<\/strong><\/h3>\n\n\n\n
Here is an example that demonstrates various operations on an array of arrays:<\/p>\n\n\n\n
let arrayOfArrays = [\n [1, 2, 3],\n [4, 5, 6],\n [7, 8, 9]\n];\n\n\/\/ Access elements\nconsole.log(arrayOfArrays[1][1]); \/\/ 5\n\n\/\/ Iterate over array of arrays\narrayOfArrays.forEach(innerArray => {\n innerArray.forEach(element => {\n console.log(element);\n });\n});\n\n\/\/ Add elements\narrayOfArrays.push([10, 11, 12]);\narrayOfArrays[0].push(0);\n\n\/\/ Remove elements\narrayOfArrays.pop();\narrayOfArrays[0].pop();\n\nconsole.log(arrayOfArrays);\n<\/pre><\/div>\n\n\n\nAccessing and manipulating arrays inside an array in JavaScript is straightforward using bracket notation.<\/p>\n\n\n\n
Also Read<\/h2>\n\n\n\n
\nHow to Check If a Key Exists in a JavaScript Object<\/a><\/p>\n<\/blockquote>\n\n\n\n
\nUnderstanding \u201cthis\u201d in JavaScript<\/a><\/p>\n<\/blockquote>\n\n\n\n
If you\u2019re planning to revamp your online presence, don\u2019t miss exploring our\u00a0website designing services<\/strong><\/a>\u00a0and custom\u00a0website development<\/a><\/strong>\u00a0solutions tailored to your business needs.<\/p>\n","protected":false},"excerpt":{"rendered":"
Get Array Inside an Array in Javascript, How to fetch an array inside Javascript complete explained<\/p>\n","protected":false},"author":1,"featured_media":1092,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[149,150],"tags":[195,196],"class_list":["post-1121","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-array-inside-javascript","tag-javascript-array"],"_links":{"self":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/1121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/comments?post=1121"}],"version-history":[{"count":8,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/1121\/revisions"}],"predecessor-version":[{"id":1351,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/posts\/1121\/revisions\/1351"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media\/1092"}],"wp:attachment":[{"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/media?parent=1121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/categories?post=1121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appfinz.com\/blogs\/wp-json\/wp\/v2\/tags?post=1121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}