Loop through array of arrays in javascript

Question

I have an array which looks like this:

var arrayElements=
[
 ["1","description 1",
 [
 ["1.1","description 1.1"],
 ["1.2","description 1.2"],
 ["1.2","description 1.3"]
 ]
 ]
 ,
 ["2","description 2"],
 ["3","description 3",
 [
 ["3.1","description 3.1"],
 ["3.2","description 3.2",
 [
 ["3.2.1","description 3.2.1"],
 ["3.2.2","description 3.2.2"],
 ["3.2.2","description 3.2.3"]
 ]
 ],
 ["3.3","description 3.3"]
 ]
 ],
 ["4","description 4"]
];

I want to loop trough the following array, be able to access all values as well as print depth of each element. Expected outcome in console would be something like this:

description 1, depth 1
description 1.1, depth 2
description 1.2, depth 2
description 1.3, depth 2
description 2, depth 1
description 3, depth 1
description 3.1, depth 2
description 3.2, depth 2
description 3.2.1, depth 3
description 3.2.2, depth 3
description 3.2.3, depth 3
description 3.3, depth 2
description 4, depth 1

Here's what I have tried:

var depth = 0;
function listNodes(array){
 for(i = 0; i < array.length;i++){
 if( /* itearating over root array */ ){
 depth = 1;
 }
 if(array[i][2] instanceof Array){
 depth++;
 console.log(array[i][1] + " depth: "+depth);
 listNodes(array[i][2]);
 }else{
 console.log(array[i][1] + " depth: "+depth);
 }
 }
}
listNodes(arrayElements);

I'm unable to loop through this array, it gets stuck even though it should continue. Another problem is the fact that my variable storing depth is not working as I'm unable to determine when the loop iterates over the root array so that I can reset the depth counter. Any ideas?

• hindmost: depth must be function parameter, not shared variable.

Answer 1

var arrayElements=
[
 ["1","description 1",
 [
 ["1.1","description 1.1"],
 ["1.2","description 1.2"],
 ["1.2","description 1.3"]
 ]
 ]
 ,
 ["2","description 2"],
 ["3","description 3",
 [
 ["3.1","description 3.1"],
 ["3.2","description 3.2",
 [
 ["3.2.1","description 3.2.1"],
 ["3.2.2","description 3.2.2"],
 ["3.2.2","description 3.2.3"]
 ]
 ],
 ["3.3","description 3.3"]
 ]
 ],
 ["4","description 4"]
];
function listNodes(array, depth) {
 depth = typeof depth === 'undefined' ? 1 : depth;
	var len = array.length;
 for(var i = 0; i < array.length;i++) {
 console.log(array[i][1] + " depth: "+ depth);
 
 if(array[i][2] instanceof Array) {
 listNodes(array[i][2], depth + 1);
 }
 }
}
listNodes(arrayElements);

This gives me the exact output from your example. Note that I'm passing the depth as a parameter to the function.

• jacek_podwysocki: Thank you. Adding parameter is solution I was looking for, I was not able to come up with an idea of resetting depth counter other way than by storing it's value in variable.

Answer 2

It would be prettier and more flexible if you could use objects instead of remembering indexes:

var arrayElements = [{
 id: "1",
 description: "description 1",
 children: [{
 id: "1.1",
 description: "description 1.1",
 children: []
 }]
 },
 {
 id: "2",
 description: "description 2",
 children: [{
 id: "2.1",
 description: "description 2.1",
 children: [{
 id: "2.1.1",
 description: "description 2.1.1",
 children: []
 },
 {
 id: "2.1.2",
 description: "description 2.1.2",
 children: []
 }
 ]
 }]
 }
];
function deepSearch(arr, depth, cb) {
 if (depth === void 0) {
 depth = 0;
 }
 if (cb === void 0) {
 cb = function(val) {
 console.log(val);
 };
 }
 for (var i = 0; i < arr.length; i++) {
 var val = arr[i];
 cb(val.id + " - " + val.description + " at depth " + depth);
 if (val.children.length > 0) {
 deepSearch(val.children, depth + 1, cb);
 }
 }
}
deepSearch(arrayElements);

Answer 3

You can do something like this

function listNodes(array, depth) {
 depth++;
 for (let i = 0; i < array.length; i++) {
 console.log(array[i][1] + ' - ' + depth);
 if (typeof array[i][2] === 'object') {
 listNodes(array[i][2], depth);
 }
 }
}
listNodes(arrayElements, 0);

Considering your example o/p of this will be:

description 1 - 1
description 1.1 - 2
description 1.2 - 2
description 1.3 - 2
description 2 - 1
description 3 - 1
description 3.1 - 2
description 3.2 - 2
description 3.2.1 - 3
description 3.2.2 - 3
description 3.2.3 - 3
description 3.3 - 2
description 4 - 1