PHP Recursive Multidimensional Array to HTML nested code

Hello, Im trying to create nested blocks of HTML code from a Multidimensional Array in PHP using a recursive function. However I can not seem to print the tags in a nested order.

Here is the original array:

$array_1 = 
		  array
		  (
			  array
				  (
					  'id' => '1',
					  'tag' => 'div1',
					  'parent' => '0'
				  ),
					  
			  array
				  (
					  'id' => '2',
					  'tag' => 'div2',
					  'parent' => '1'
				  ),
			  array
				  (
					  'id' => '3',
					  'tag' => 'div3',
					  'parent' => '2'
				  ),
			  array
				  (
					  'id' => '4',
					  'tag' => 'div4',
					  'parent' => '2'
				  ),
			  array
				  (
					  'id' => '5',
					  'tag' => 'div5',
					  'parent' => '0'
				  ),
			  array
				  (
					  'id' => '6',
					  'tag' => 'div6',
					  'parent' => '5'
				  ),
			  array
				  (
					  'id' => '7',
					  'tag' => 'div7',
					  'parent' => '0'
				  )
		  );

The first thing I do is to use a function to turn this array into a multidimensional array by building a tree structure using the parent element of each record as reference:

function buildTree(array $elements, $parentId = 0) {
    
	$branch = array();

    foreach ($elements as $element) 
	{
        if ($element['parent'] == $parentId) 
		{
            $children = buildTree($elements, $element['id']);
            
			if ($children) 
			{
                $element['children'] = $children;
            }
			
			$branch[] = $element;
        }
    }

    return $branch;
}

$tree_1 = buildTree($array_1);

Once this is done the multidimensional array should look like this:

Array
(
    [0] => Array
        (
            [id] => 1
            [name] => div1
            [parent] => 0
            [children] => Array
                (
                    [0] => Array
                        (
                            [id] => 2
                            [name] => div2
                            [parent] => 1
                            [children] => Array
                                (
                                    [0] => Array
                                        (
                                            [id] => 3
                                            [name] => div3
                                            [parent] => 2
                                        )

                                    [1] => Array
                                        (
                                            [id] => 4
                                            [name] => div4
                                            [parent] => 2
                                        )

                                )

                        )

                )

        )

    [1] => Array
        (
            [id] => 5
            [name] => div5
            [parent] => 0
            [children] => Array
                (
                    [0] => Array
                        (
                            [id] => 6
                            [name] => div6
                            [parent] => 5
                        )

                )

        )

    [2] => Array
        (
            [id] => 7
            [name] => div7
            [parent] => 0
        )

)

The next thing to do is to output the html elements in a nested order. In this example Im using symbolic tag names such as div1, div2, etc; but in reality they could be any html tags like divs, h1, ul,li, form, etc; with their opening and closing tags.

To accomplish this I use the following recursive function, however my problem is that it does not show the html elements in a nested order as they should be.

function recursive($array, $level = 0)
{
    foreach($array as $key => $value)
	{
        
		if (!is_array($value) && $key == "tag") { echo str_repeat(" ", $level), "[".$value."]", ''; }
		
		//If $value is an array.
        if(is_array($value))
		{
			//We need to loop through it.
            recursive($value, $level + 1);
        } 
		else
		{
            //It is not an array, so print it out.			
			if ($key == "tag") { echo "[/".$value."]", '<br>'; }
						
        }
    }
}

$tree_2 = recursive($tree_1);

echo $tree_2;

This is how it currently outputs the html tags from the array:

[div1][/div1]

   [div2][/div2]

     [div3][/div3]

     [div4][/div4]

 [div5][/div5]

   [div6][/div6]

 [div7][/div7]

And this is how the html tags should be output in reality based on the multidimensional array’s nested order (please note how some div tags contain other div tags before their closing element):


[div1]
   [div2]
     [div3][/div3]
     [div4][/div4]
   [/div2]
[/div1]
 
[div5]
   [div6][/div6]
[/div5]
 
[div7][/div7]

How can I get the html tags printed in the right nested order like in the last example? What am I missing? Thanks so much!

Instead of using the key => value logic for foreach loop, you can simply use the index which would be a lot easier in this case.

So, instead of your recursive function, try the following recursive function

function recursive($array, $level = 0)
{
    foreach($array as $node)
	{
        echo str_repeat("&emsp;", $level), "[".$node['tag']."]", '';
        if(isset($node['children'])) {
            echo '<br/>';
            recursive($node['children'], $level + 1);
            echo str_repeat("&emsp;", $level);
        }
        echo "[/".$node['tag']."]", '<br>';
		
    }
}

This will give you the following output:

[div1]
 [div2]
  [div3][/div3]
  [div4][/div4]
 [/div2]
[/div1]
[div5]
 [div6][/div6]
[/div5]
[div7][/div7]

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.