Search code examples
phptreeviewhierarchymenuitemnav

php tree ul li hierarchy menu from array


we have this array from mysqli query output :

$items = Array
(
    Array
    (
        'id' => 1,
        'title' => 'menu1',
        'parent_id' => 0
    ),
    Array
    (
        'id' => 2,
        'title' => 'submenu1-1',
        'parent_id' => 1
    ),
    Array
    (
        'id' => 3,
        'title' => 'submenu1-2',
        'parent_id' => 1
    ),
    Array
    (
        'id' => 4,
        'title' => 'menu2',
        'parent_id' => 0
    ),
    Array
    (
        'id' => 5,
        'title' => 'submenu2-1',
        'parent_id' => 4
    )
);

and we need this html output with php :

<ul>
        <li><a>menu1</a>
             <ul>
                 <li><a>submenu1-1</a></li>
                 <li><a>submenu1-2</a></li>
             </ul>
        </li>
        <li><a>menu2</a>
             <ul>
                 <li><a>submenu2-1</a></li>
             </ul>
        </li>
</ul>

can anyone help me ? Probably this is very easy but I have tried everything already without success !!


Solution

  • //index elements by id
    foreach ($items as $item) {
        $item['subs'] = array();
        $indexedItems[$item['id']] = (object) $item;
    }
    
    
    //assign to parent
    $topLevel = array();
    foreach ($indexedItems as $item) {
        if ($item->parent_id == 0) {
            $topLevel[] = $item;
        } else {
            $indexedItems[$item->parent_id]->subs[] = $item;
        }
    }
    
    //recursive function
    function renderMenu($items) {
        $render = '<ul>';
    
        foreach ($items as $item) {
            $render .= '<li>' . $item->title;
            if (!empty($item->subs)) {
                $render .= renderMenu($item->subs);
            }
            $render .= '</li>';
        }
    
        return $render . '</ul>';
    }
    
    echo renderMenu($topLevel);