1

I am trying to do the inverse function of the response received in this post: [Post][1] [1]: https://stackoverflow.com/a/23427469/19867306

@scozy shows us a function to transform an html text to a JSON model. I need to transform the same JSON model to HTML again.

The function shared by @scozy is:

function html_to_obj($html) {
    $dom = new DOMDocument();
    $dom->loadHTML($html);
    return element_to_obj($dom->documentElement);
}

function element_to_obj($element) {
    $obj = array( "tag" => $element->tagName );
    foreach ($element->attributes as $attribute) {
        $obj[$attribute->name] = $attribute->value;
    }
    foreach ($element->childNodes as $subElement) {
        if ($subElement->nodeType == XML_TEXT_NODE) {
            $obj["html"] = $subElement->wholeText;
        }
        else {
            $obj["children"][] = element_to_obj($subElement);
        }
    }
    return $obj;
}

$html = <<<EOF
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> This is a test </title>
    </head>
    <body>
        <h1> Is this working? </h1>  
        <ul>
            <li> Yes </li>
            <li> No </li>
        </ul>
    </body>
</html>

EOF;

header("Content-Type: text/plain");
echo json_encode(html_to_obj($html), JSON_PRETTY_PRINT);

The output of the function is this:

{
    "tag": "html",
    "lang": "en",
    "children": [
        {
            "tag": "head",
            "children": [
                {
                    "tag": "title",
                    "html": " This is a test "
                }
            ]
        },
        {
            "tag": "body",
            "html": "  \n        ",
            "children": [
                {
                    "tag": "h1",
                    "html": " Is this working? "
                },
                {
                    "tag": "ul",
                    "children": [
                        {
                            "tag": "li",
                            "html": " Yes "
                        },
                        {
                            "tag": "li",
                            "html": " No "
                        }
                    ],
                    "html": "\n        "
                }
            ]
        }
    ]
}

I was thinking of making a function that, using the help of json_decode, transforms the json into an object and then makes use of a foreach and then makes a recursive call to the same function. At the moment my mind is all mixed up and it would be a great help if you could give me a hand.

My mind:

function json_to_html($json) {
    $html = json_decode($json);
    foreach ($html as $key => $item) {
        // Something :C
    }
    
}

$json = '{ "tag": "html", "lang": "en", "html": "\r\n", "children": [ { "tag": "head", "html": "\r\n ", "children": [ { "tag": "title", "html": " This is a test " } ] }, { "tag": "body", "html": "\r\n ", "children": [ { "tag": "h1", "html": " Is this working? " }, { "tag": "ul", "html": "\r\n ", "children": [ { "tag": "li", "html": " Yes " }, { "tag": "li", "html": " No " } ] } ] } ] }';

json_to_html($json);
Jose Galaz
  • 21
  • 3

1 Answers1

1

I solved the question as follow:

function json_to_html($json) {
    $html = "";
    $param = "";
    foreach ($json as $key => $value) {
        if (is_numeric($key) || $key == 'children') {
            $html = $html . json_to_html($value);
        } else {
            if ($key == 'tag') {
                $tag = "<$value [param]>[html]</$value>";
                continue;
            } else if ($key == 'html') {
                $tag = str_replace('[param]',$param,$tag);
                $html = str_replace('[html]',$value,$tag);
                continue;
            } else {
                $param = $param . $key . ' = "' . $value . '"';
                continue;
            }
        }
        
    }

    return $html;
}

Note: the json is decoded previously

Jose Galaz
  • 21
  • 3