Using Twig or Grunt to create navigation from JSON array - json

Question

I got some help generating JSON from folder structure via Grunt. That worked great.
Now, I want to take that JSON and create a menu based on the output.
Here is a sample of what I'm talking about.
{
"files": [
{
"name": "firstpage.twig",
"path": "folder1/subfolder1"
},
{
"name": "secondpage.twig",
"path": "folder1/subfolder1"
},
{
"name": "thirdpage.twig",
"path": "folder1/subfolder1"
},
{
"name": "fourthpage.twig",
"path": "folder1/subfolder1"
},
{
"name": "anotherpage.twig",
"path": "folder1/subfolder2"
},
{
"name": "yetanother.twig",
"path": "folder1/subfolder2"
},
{
"name": "heresanother.twig",
"path": "folder2/subfolder3"
},
{
"name": "anotherone.twig",
"path": "folder2/subfolder3"
}
]
}
I'd like to build a nav so that it would be like
<ul>
<li>
folder1
<ul>
<li>
subfolder1
<ul>
<li>firstpage</li>
<li>secondpage</li>
<li>thirdpage</li>
<li>fourthpage</li>
</ul>
subfolder2
<ul>
<li>anotherpage</li>
<li>yetanother</li>
</ul>
</li>
</ul>
</li>
<li>
folder2
<ul>
<li>
subfolder3
<ul>
<li>heresanother</li>
<li>anotherone</li>
</ul>
</li>
</ul>
</li>
</ul>
The sections of folder1, subfolder1, etc would be dynamically populated based off of going through the path entries within the JSON and parsing the unique ones out.
I am using a Grunt custom task to generate the JSON. I also am using Twig that gets rendered via a Twig Rendering Grunt package. There is no other framework to play with here, just pure Twig. It's all done through NPM.
I tried this so far but am obviously failing
{% for folder in files %}
{% set folders = folder.path|split('/') %}
{% for i in folders if i (doesn't already exist) %}
// Dynamic menu goes here
{% endfor %}
{% endfor %}
Just stuck here banging my head off the desk. :)
Thanks in advance for any help!

Answer 1

In the Gruntfile, the custom task that works is like this:
grunt.registerTask('twigList', 'Creates list of twig files', function() {
var obj = {};
obj.files = find('sections')
.filter(function(filePath) {
return filePath.match(/\.twig$/);
})
.map(function(filePath) {
let itemPath = path.dirname(filePath).replace('sections/','');
let pathSeparatorPos = itemPath.indexOf('/');
let rootPath = itemPath.substring(0, pathSeparatorPos);
return {
name: path.basename(filePath),
path: itemPath,
rootPath: rootPath,
}
});
grunt.file.write('data/page-list.json', JSON.stringify(obj, null, 2));
});
and then the quick and dirty twig is this
{% set _lastRootPath = false %}
{% for folder in files if folder.rootPath is not empty %}
{% if folder.rootPath != _lastRootPath %}
{% set _lastRootPath = folder.rootPath %}
{{ folder.rootPath }}
{% endif %}
{% endfor %}
{% set _lastRootPath = false %}
<ul>
{% for folder in files if folder.rootPath is not empty %}
{% if folder.rootPath != _lastRootPath %}
{% if _lastRootPath != false %}</ul></li>{% endif %}
{% set _lastRootPath = folder.rootPath %}
<li>{{ folder.rootPath }}<ul>
{% endif %}
{% if folder.rootPath == _lastRootPath %}
<li>{{ folder.name }}</li>
{% endif %}
{% endfor %}
It's not polished but it works