Creating Html Element from multidimensional Array - php

Question

Not sure how will i able to explain this, but here we go
I have an array as below:
$arr = array(
array('id' => 1,
'content' => '<h1>This is a simple Content</h1>',
'vars' => null,
'path' => 'holders/row.php',
'sub-page' => array(
'id' => 2,
'content' => '<h1>Sample Body Here</h1>',
'vars' => '{"title":"Sample Title Here"}',
'path' => 'holders/box.php',
'sub-page' => array(
'id' => 3,
'vars' => '{"title":"Sample Title NUmber 3 Here"}',
'content' => '<h1>Again Sample Body Here</h1>',
'path' => 'holders/box.php'
)
)
)
);
What i am looking for is
array should go to the deepest sub-page and json_decode the vars key and extract as variables and include the file.
Once this is done, the output is passed to the parent's content key and parse it again
This is basically for creating dynamic content
the holders/row.php contains:
<div class="row">
<?= $content; ?>
</div>
and holders/box.php contains:
<div class="box lite">
<div class="box-title">
<h4><?= $title; ?></h4>
<div class="tools">
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="box-body">
<?= $content; ?>
</div>
</div>
and the desired output is:
<div class="row">
<div class="box lite">
<div class="box-title">
<h4>Sample Title Here</h4>
<div class="tools">
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="box-body">
<h1>Again Sample Body Here</h1>
<div class="box lite">
<div class="box-title">
<h4>Sample Title NUmber 3 Here</h4>
<div class="tools">
<a href="javascript:;" class="collapse">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="box-body">
<h1>Again Sample Body Here</h1>
</div>
</div>
</div>
</div>
</div>
What have i tried so far
I am trying to loop around the array as below:
foreach ($arr as &$page) {
if (isset($page[$keyToParse])) {
$subMenu = $page[$keyToParse];
unset($page[$keyToParse]);
$page['content'] = $page['content'] . $this->parsePage($keyToParse, $subMenu);
return $page['content'];
} else {
$params = strlen($page['vars']) > 0 ? json_decode($page['vars'], true) : [];
$elementPath = $page['path'];
$params = array_merge($params, array('content' => $page['content']));
$page['content'] = callback(function () use ($params, $elementPath) {
extract($params);
include($elementPath);
});
return $page['content'];
}
and the function callback is as:
function callback($userfunc)
{
ob_start();
$userfunc();
$return = ob_get_contents();
ob_end_clean();
return $return;
}
Please help as i am stuck for a long time now

Answer 1

All you should have to do is something like this.
function renderNode($node){
ob_start();
if (isset($node["sub-page"]) && $node["sub-page"]){
$node["content"] = renderNode($node["sub-page"]);
}
extract($node);
include ($node["path"]);
return ob_get_clean();
}
and then invoke it like:
echo renderNode($arr[0]);