PHP array with levels to HTML tree - php

Question

I have an array in php that looks kind of like this:
array[x][0]=item name
array[x][1]=level
so, for example,
array[0][0]="Node 1"
array[0][1]=0
array[1][0]="Node 2"
array[1][1]=0
array[2][0]="Node 2.1"
array[2][1]=1
array[3][0]="Node 2.1.1"
array[3][1]=2
array[4][0]="Node 2.2"
array[4][1]=1
I need to turn it into an html ul list, but one that looks like this:
<ul>
<li>
<input type="checkbox" /><span>Node 1</span>
</li>
<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></li>
</ul>
</li>
<li>
<input type="checkbox" /><span>Node 2.2</span>
</li>
</ul>
</li>
</ul>
The biggest catch is the position of the </li> tag - it needs to be after the next <ul> tag. So it's <li> current node <ul><li> child node </li></ul></li>. It's that last </li> that gets me.
This format is necessary to work with the jquery plugin I'm using (https://github.com/daredevel/jquery-tree).
I've seen the suggestions here: create html list from array with levels but that doesn't work due to the extra .
I think there's a solution to this using recursion and array slicing, but that seems inefficient. So far, my attempts at an iterative solution have failed...

Answer 1

You can use this function to convert your array to a nested HTML list (echo nestedHtmlList($array);)
function nestedHtmlList($array) {
$depth = 0;
$result = "";
foreach ($array as $node) {
$newDepth = $node[1];
if ($newDepth > $depth) {
$result .= "<ul><li>";
} else if ($newDepth < $depth) {
for ($d = $newDepth; $d < $depth; $d++) {
$result .= "</li></ul>";
}
$result .= "</li><li>";
} else if ($result == "") {
$result .= "<ul><li>";
} else {
$result .= "</li><li>";
}
$result .= "<input type='checkbox' /><span>";
$result .= $node[0];
$result .= "</span>";
$depth = $newDepth;
}
while ($depth > 0) {
$result .= "</li></ul>";
$depth -= 1;
}
return $result;
}

Answer 2

Tell me what you think:
Code
$array = [];
$array[0][0]="Node 1";
$array[0][1]=0;
$array[1][0]="Node 2";
$array[1][1]=0;
$array[2][0]="Node 2.1";
$array[2][1]=1;
$array[3][0]="Node 2.1.1";
$array[3][1]=2;
$array[4][0]="Node 2.2";
$array[4][1]=1;
function makeList( &$array, $level = null ) {
$html = '<ul>';
$html .= '<li>Level: ' . $level;
while( $element = array_shift( $array ) ) {
if( $level == $element[1] ) {
$html .= '</li><li><label><input type="checkbox"/> ' . $element[0] . '</label>';
} else if( $level < $element[1] ) {
array_unshift( $array, $element );
$html .= makeList( $array, $element[1] ) . '</li>';
} else {
array_unshift( $array, $element );
break;
}
}
$html .= '</ul>';
return $html;
}
echo '<pre>';
echo makeList($array);
Output (human rendered html :D)
Level:
[] Node 1
[] Node 2
Level: 1
[] Node 2.1
Level: 2
[] Node 2.1.1
[] Node 2.2