Convert nested array to html (ul li)

Problem: How to Generate an HTML Unordered List from a Nested Array in PHP?

I have a nested array in PHP that represents a hierarchy with parent-child relationships. I want to generate an HTML unordered list (<ul>) from this array, where each level is correctly nested. How can I achieve this?

Here’s an example of the nested array:

$nestedArray = [
    [
        'id' => 1,
        'name' => 'Parent 1',
        'children' => [
            [
                'id' => 2,
                'name' => 'Child 1.1',
                'children' => [
                    [
                        'id' => 4,
                        'name' => 'Child 1.1.1'
                    ]
                ]
            ],
            [
                'id' => 3,
                'name' => 'Child 1.2'
            ]
        ]
    ],
    [
        'id' => 5,
        'name' => 'Parent 2',
        'children' => [
            [
                'id' => 6,
                'name' => 'Child 2.1'
            ]
        ]
    ]
];

I want to transform it into an HTML structure like this:

<ul>
    <li>Parent 1
        <ul>
            <li>Child 1.1
                <ul>
                    <li>Child 1.1.1</li>
                </ul>
            </li>
            <li>Child 1.2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul>
            <li>Child 2.1</li>
        </ul>
    </li>
</ul>

How can I create a recursive function in PHP to generate this HTML?

Solution: Generating an HTML Unordered List from a Nested Array Using PHP

To create a nested unordered list from a nested array, you need a recursive function that loops through each item, checks if it has children, and outputs the appropriate HTML structure.

Step-by-Step Implementation:

We create a recursive function that builds the HTML list based on the given nested array.
The function checks if each item has children, and if it does, it generates another nested list.

Here’s how to do it:

function generateNestedList(array $items) {
    $html = '<ul>';

    foreach ($items as $item) {
        $html .= '<li>' . htmlspecialchars($item['name']);

        if (!empty($item['children'])) {
            $html .= generateNestedList($item['children']);
        }

        $html .= '</li>';
    }

    $html .= '</ul>';

    return $html;
}

// Example nested array
$nestedArray = [
    [
        'id' => 1,
        'name' => 'Parent 1',
        'children' => [
            [
                'id' => 2,
                'name' => 'Child 1.1',
                'children' => [
                    [
                        'id' => 4,
                        'name' => 'Child 1.1.1'
                    ]
                ]
            ],
            [
                'id' => 3,
                'name' => 'Child 1.2'
            ]
        ]
    ],
    [
        'id' => 5,
        'name' => 'Parent 2',
        'children' => [
            [
                'id' => 6,
                'name' => 'Child 2.1'
            ]
        ]
    ]
];

// Generate the HTML unordered list
echo generateNestedList($nestedArray);

Explanation:

The generateNestedList() function takes the nested array as its input.
It starts by creating an opening <ul> tag.
The function then loops through each item in the array and creates an <li> element for each item’s name.
If the item has children (i.e., a children key that is not empty), the function calls itself recursively to generate the nested list.
The function finally closes the <ul> tag and returns the complete HTML structure.

Output:

The function generates the following HTML:

<ul>
    <li>Parent 1
        <ul>
            <li>Child 1.1
                <ul>
                    <li>Child 1.1.1</li>
                </ul>
            </li>
            <li>Child 1.2</li>
        </ul>
    </li>
    <li>Parent 2
        <ul>
            <li>Child 2.1</li>
        </ul>
    </li>
</ul>

Conclusion:

This solution demonstrates how to convert a nested array into an HTML unordered list using a recursive function in PHP. This approach is ideal for dynamically generating hierarchical data, such as categories, menus, or organizational structures.

By utilizing recursion, you can easily handle deeply nested arrays and create structured HTML output.