I'm trying to build a HTML list using a recursive loop from an object structured like this – there are an infinite number of levels of possible depth:
object = {
"directories":{
"vegetables":{
"info":{
"name":"Vegetables"
},
"files":{
},
"directories":{
"green vegetables":{
"info":{
"name":"Green Vegetables"
},
"files":{
},
"directories":{
"lettuce":{
"info":{
"name":"Lettuce"
},
"files":{
}
},
"cucumber":{
"info":{
"name":"Cucumber"
},
"files":{
}
}
}
},
"orange vegetables":{
"info":{
"name":"Orange Vegetables"
},
"files":{
},
"directories":{
"3 deep":{
"info":{
"name":"Carrot"
},
"files":{
}
}
}
}
}
},
"fruit":{
"info":{
"name":"Fruit"
},
"files":{
},
"directories":{
"apple":{
"info":{
"name":"Apple"
},
"files":{
}
}
}
}
}
}
The loop should create a nested html list as follows:
- Vegetables
- Green Vegetables
- Lettuce
- Cucumber
- Orange Vegetables
- Carrot
- Fruit
- Apple
Currently my function looks like this, but currently it gets stuck after the first list item and I'm struggling to get my head around how to call itself correctly recursively:
function loopFilters(val){
app.navList.push('');
$.each(val.directories, function(i, val) {
app.navList.push('- ' + directory);
if(val){
// console.log('yes', val.directories);
app.core.addFiltersToPage(val.directories)
}
app.navList.push(' ');
});
app.navList.push('
');
}
How can I rewrite my function to work with my Javascript object?
No comments:
Post a Comment