Recursive Javascript Array

Question

I have an array something like this, I would like to iterate each element until they not have property "sub". How can I make it with javascript??? I don't know what number of "sub" they have.

var items = [
 { title: 'a' },
 { title: 'b', sub: [
 { title: 'ba' }, 
 { title: 'bb' }
 ] },
 { title: 'c', sub: [
 { title: 'ca', sub: [
 { title: 'caa' },
 { title: 'cba' }
 ] }
 ] }
];

• depperm: so you want to make sub an empty array or get the array from sub? What have you tried so far?
• dfsq: Iterate and do what with those items?
• Nick F: What is the output you would like from the above? Do you want all the sub-items flattened into a single one-dimensional array of 8 objects, or do you just want all of them removed (ie. leave just an array of 'a', 'b', and 'c')?

Answer 1

You can iterate your array recursively with something like this:

function iterateArray(array){
 array.forEach(function(item){
 var title = item.title;
 console.log(title);
 if(item.sub){
 iterateArray(item.sub);
 }
 });
}

The iterateArray(items); output would be

a, b, ba, bb, c, ca, caa, cba

• Davide: Is it possible without jQuery??
• RPallas: That's vanilla JavaScript, more info: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Answer 2

Generally the best way to loop through an arrays of arrays with an unknown nesting level and to do something on each item within the entire object is to use recursion.

function doThing(arr) {
 if ( typeof(arr) == "object") {
 for (var i = 0; i < arr.length; i++) {
 doThing(arr[i]);
 }
 }
 else {
 //Do your thing with this item!
 }
}