Вы можете взять рекурсивный подход, взяв объект каталога и построить новый список <ul>
с именами как значение и проверить вложенное свойство каталога.
function getList(directories) {
return Object
.values(directories)
.reduce((ul, { info: { name }, directories }) => {
var li = document.createElement('li');
li.appendChild(document.createTextNode(name));
ul.appendChild(li);
if (directories) {
li.appendChild(getList(directories));
}
return ul;
}, document.createElement('ul'));
}
var data = { 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: {} } } } } };
document.body.appendChild(getList(data.directories));
.as-console-wrapper { max-height: 100% !important; top: 0; }