I am trying to build an HTML tree in this format below, it can go as many levels deep as needed but it should follow this format.
What I have as a data source is a PHP array that is built from an API call in Magento.
My PHP Array looks something like this...
Array
(
[category_id] => 1
[parent_id] => 0
[name] => Root Catalog
[is_active] =>
[position] => 0
[level] => 0
[children] => Array
(
[0] => Array
(
[category_id] => 2
[parent_id] => 1
[name] => Default Category
[is_active] => 1
[position] => 1
[level] => 1
[children] => Array
(
[0] => Array
(
[category_id] => 263
[parent_id] => 2
[name] => Texas Roadhouse
[is_active] => 1
[position] => 1
[level] => 2
[children] => Array
(
)
)
[1] => Array
(
[category_id] => 265
[parent_id] => 2
[name] => Bubba's
[is_active] => 1
[position] => 2
[level] => 2
[children] => Array
(
)
)
[2] => Array
(
[category_id] => 3
[parent_id] => 2
[name] => Neon Signs
[is_active] => 1
[position] => 3
[level] => 2
[children] => Array
(
[0] => Array
(
[category_id] => 12
[parent_id] => 3
[name] => Custom Neon Signs
[is_active] => 1
[position] => 1
[level] => 3
[children] => Array
(
[0] => Array
(
[category_id] => 257
[parent_id] => 12
[name] => Animals Custom Neon Signs
[is_active] => 0
[position] => 1
[level] => 4
[children] => Array
(
)
)
[1] => Array
(
[category_id] => 258
[parent_id] => 12
[name] => Bar Beer Cocktails Custom Neon Signs
[is_active] => 0
[position] => 2
[level] => 4
[children] => Array
(
)
)
The HTML output that I need to convert my PHP array into should be in this format...
<div id="tree">
<ul>
<li><input type="checkbox"><span>Node 1</span>
<ul>
<li><input type="checkbox"><span>Node 1.1</span>
<ul>
<li><input type="checkbox"><span>Node 1.1.1</span>
</ul>
</ul>
<ul>
<li><input type="checkbox"><span>Node 1.2</span>
<ul>
<li><input type="checkbox"><span>Node 1.2.1</span>
<li><input type="checkbox"><span>Node 1.2.2</span>
<li><input type="checkbox"><span>Node 1.2.3</span>
<ul>
<li><input type="checkbox"><span>Node 1.2.3.1</span>
<li><input type="checkbox"><span>Node 1.2.3.2</span>
</ul>
<li><input type="checkbox"><span>Node 1.2.4</span>
<li><input type="checkbox"><span>Node 1.2.5</span>
<li><input type="checkbox"><span>Node 1.2.6</span>
</ul>
</ul>
<li><input type="checkbox"><span>Node 2</span>
<ul>
<li><input type="checkbox"><span>Node 2.1</span>
<ul>
<li><input type="checkbox"><span>Node 2.1.1</span>
</ul>
<li><input type="checkbox"><span>Node 2.2</span>
<ul>
<li><input type="checkbox"><span>Node 2.2.1</span>
<li><input type="checkbox"><span>Node 2.2.2</span>
<li><input type="checkbox"><span>Node 2.2.3</span>
<ul>
<li><input type="checkbox"><span>Node 2.2.3.1</span>
<li><input type="checkbox"><span>Node 2.2.3.2</span>
</ul>
<li><input type="checkbox"><span>Node 2.2.4</span>
<li><input type="checkbox"><span>Node 2.2.5</span>
<li><input type="checkbox"><span>Node 2.2.6</span>
</ul>
</ul>
</ul>
</div>
I really have no idea how to achieve this, I know I need to iterate the array over and over but I am not sure how to do this, if anyone can help, I would be very grateful for your time and knowledge