Menu
Basically I have a textbox where I'll enter URL and click "OK button", It will show preview of HTML at left side of page; and right side will have a tree view of HTML tags (body, header, div, span, etc.) used in HTML as attached image. Expected JSON result should be as end of this question. I am failing traversing JSON and creating tree. I tried the following:
HTML and JS code:
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ABC</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> </head> <body> <div id="wrapper"> <header> <h1 class="logo"><img src="images/logo.png" alt="" title="" /></h1> </header> <div id="container"> <div class="search-box"> <input type="text" id="url" value="" class="txt-box" /> <input type="button" value="OK" class="btn-search" /> </div> <div class="inner-wrap"> <div class="left-wrap" id="preview-sec"> </div> <div class="right-wrap" id="tree-sec"> </div> </div> </div> </div> <script type="text/javascript" language="javascript" src="js/jquery-1.11.1.js"></script><!-- Jquery plugin --> <script> var counter = 0; $(document).ready(function(){ $('.btn-search').click(function(){ if ($('#url').val() != '') { $.get( 'http://localhost/test/getHTML.php', {url:$('#url').val()}, function(response) { $('#preview-sec').html(response); },'html'); $.getJSON('http://localhost/test/results.json', function(json) { traverse(json,0); }); } }); }); function traverse(obj,id){ if (typeof(obj)=="object") { if (id == 0) { $('#tree-sec').append('<ul></ul>'); } else { $(id).append('<ul></ul>'); } $.each(obj, function(i,val){ if (i != 'attributes' && i != 'value') { counter += 1; var li_populate = "<li id="+i+"-"+counter+">"+i+"</li>"; if (id == 0) { $('#tree-sec ul').append(li_populate); } else { $(id).find('ul').append(li_populate); } traverse(val,"#"+i+"-"+counter); } }) } } </script> </body> </html> PHP code:
<?php $url = $_GET['url']; $html = file_get_contents($url); function html_to_obj($html) { $dom = new DOMDocument(); $dom->loadHTML($html); return element_to_obj($dom->documentElement); } function element_to_obj($element) { //print_r($element); $obj = array(); $attr = array(); $arr = array(); $name = $element->tagName; foreach ($element->attributes as $attribute) { $attr[$attribute->name] = $attribute->value; if ($attribute->name == 'id') { $name .= '#'.$attribute->value; } } if (!empty($attr)) { $arr["attributes"] = $attr; } if ($element->nodeValue != '') { $arr["value"] = $element->nodeValue; } foreach ($element->childNodes as $subElement) { if ($subElement->nodeType == XML_TEXT_NODE) { } elseif ($subElement->nodeType == XML_CDATA_SECTION_NODE) { } else { $arr["child_nodes"][] = element_to_obj($subElement); } } $obj[$name] = $arr; return $obj; } $json = json_encode(html_to_obj($html)); $fp = fopen('results.json', 'w'); fwrite($fp,$json); fclose($fp); echo $html;exit(); ?> JSON tree output:
JSON Result:
{ "html": { "attributes": { "lang": "en" }, "value": "Test Development Test\r\n *{\r\n box-sizing:border-box;\r\n }\r\n body {\r\n margin:0;\r\n font-family: sans-serif;\r\n color: #999;\r\n }\r\n a, a:visited {\r\n text-decoration:none;\r\n }\r\n .movie-list .movie{\r\n width:250px;\r\n float:left;\r\n margin-right:25px;\r\n }\r\n .movie-list .movie img{\r\n width:100%;\r\n }\r\n .movie-list .movie a.title{\r\n text-decoration:none;\r\n color:#999;\r\n font-weight:bold;\r\n font-size:18px;\r\n line-height:25px;\r\n }\r\n .movie-list .movie .synopsis{\r\n font-size:14px;\r\n line-height:20px;\r\n }\r\n", "child_nodes": { "head": { "child_nodes": { "meta": { "attributes": { "name": "description", "content": "A ast of animated movies" } }, "title": { "value": "Test Development Test" }, "style": { "attributes": { "type": "text/css" }, "value": "\r\n *{\r\n box-sizing:border-box;\r\n }\r\n body {\r\n margin:0;\r\n font-family: sans-serif;\r\n color: #999;\r\n }\r\n a, a:visited {\r\n text-decoration:none;\r\n }\r\n .movie-list .movie{\r\n width:250px;\r\n float:left;\r\n margin-right:25px;\r\n }\r\n .movie-list .movie img{\r\n width:100%;\r\n }\r\n .movie-list .movie a.title{\r\n text-decoration:none;\r\n color:#999;\r\n font-weight:bold;\r\n font-size:18px;\r\n line-height:25px;\r\n }\r\n .movie-list .movie .synopsis{\r\n font-size:14px;\r\n line-height:20px;\r\n }\r\n" } } }, "body": { "child_nodes": { "h1": { "value": "List of animated movies" }, "div": { "attributes": { "class": "movie-list" }, "child_nodes": { "div#bh_6": { "attributes": { "class": "movie", "id": "bh_6", "data-year": "2014" }, "child_nodes": { "img": { "attributes": { "src": "http://ia.media-imdb.com/images/M/MV5BMjI4MTIzODU2NV5BMl5BanBnXkFtZTgwMjE0NDAwMjE@._V1_SY317_CR0,0,214,317_AL_.jpg" } }, "a": { "attributes": { "class": "title", "href": "http://www.imdb.com/title/tt2245084/" }, "value": "Big Hero 6" }, "div": { "attributes": { "class": "synopsis" }, "value": "The special bond that develops between plus-sized inflatable robot Baymax, and prodigy Hiro Hamada, who team up with a group of friends to form a band of high-tech heroes." } } }, "div#tlm": { "attributes": { "class": "movie", "id": "tlm", "data-year": "2014" }, "child_nodes": { "img": { "attributes": { "src": "http://ia.media-imdb.com/images/M/MV5BMTg4MDk1ODExN15BMl5BanBnXkFtZTgwNzIyNjg3MDE@._V1_SX214_AL_.jpg" } }, "a": { "attributes": { "class": "title", "href": "http://www.imdb.com/title/tt1490017/" }, "value": "The Lego Movie" }, "div": { "attributes": { "class": "synopsis" }, "value": "An ordinary Lego construction worker, thought to be the prophesied 'Special', is recruited to join a quest to stop an evil tyrant from gluing the Lego universe into eternal stasis." } } }, "div#httyd": { "attributes": { "class": "movie", "id": "httyd", "data-year": "2010" }, "child_nodes": { "img": { "attributes": { "src": "http://ia.media-imdb.com/images/M/MV5BMjA5NDQyMjc2NF5BMl5BanBnXkFtZTcwMjg5ODcyMw@@._V1_SX214_AL_.jpg" } }, "a": { "attributes": { "class": "title", "href": "http://www.imdb.com/title/tt0892769/" }, "value": "How to Train Your Dragon" }, "div": { "attributes": { "class": "synopsis" }, "value": "A hapless young Viking who aspires to hunt dragons becomes the unlikely friend of a young dragon himself, and learns there may be more to the creatures than he assumed." } } }, "div#up": { "attributes": { "class": "movie", "id": "up", "data-year": "2009" }, "child_nodes": { "img": { "attributes": { "src": "http://ia.media-imdb.com/images/M/MV5BMTk3NDE2NzI4NF5BMl5BanBnXkFtZTgwNzE1MzEyMTE@._V1_SX214_AL_.jpg" } }, "a": { "attributes": { "class": "title", "href": "http://www.imdb.com/title/tt1049413/" }, "value": "Up" }, "div": { "attributes": { "class": "synopsis" }, "value": "By tying thousands of balloons to his home, 78-year-old Carl sets out to fulfill his lifelong dream to see the wilds of South America. Russell, a wilderness explorer 70 years younger, inadvertently becomes a stowaway." } } }, "div#mi": { "attributes": { "class": "movie", "id": "mi", "data-year": "2001" }, "child_nodes": { "img": { "attributes": { "src": "http://ia.media-imdb.com/images/M/MV5BMTY1NTI0ODUyOF5BMl5BanBnXkFtZTgwNTEyNjQ0MDE@._V1_SX214_AL_.jpg" } }, "a": { "attributes": { "class": "title", "href": "http://www.imdb.com/title/tt0198781/" }, "value": "Monsters, Inc." }, "div": { "attributes": { "class": "synopsis" }, "value": "Monsters generate their city's power by scaring children, but they are terribly afraid themselves of being contaminated by children, so when one enters Monstropolis, top scarer Sulley finds his world disrupted." } } } } } } } } } } 
852
The jQuery code uses getJSON() method to fetch the data from the file's location using an AJAX HTTP GET request. It takes two arguments. One is the location of the JSON file and the other is the function containing the JSON data. The each() function is used to iterate through all the objects in the array.
What is jsTree? jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading.
As per your question, the part where you traverse the returned json object and create the tree is problematic. In your code, the recursive function to traverse the json data had a few minor issues with the generate ul code. The structure of the return object made it a bit challenging.
I was able to modify your html/javascript code a bit (without changing it too much) to print out the tree. The relevant code below:
CSS:
div#tree-sec ul ul{ margin-left: 25px; } div#tree-sec ul li{ color: #666; } div#tree-sec ul a{ color: #111; text-decoration: underline; cursor: pointer; } div#tree-sec ul a:hover { text-decoration: none; } div#tree-sec ul.collapsible{ /* Custom parent styles here... */ /* Such as a folder icon or 'plus' sign */ } HTML & JS:
... ... <div class="inner-wrap"> <div class="left-wrap" id="preview-sec"> <iframe id="preview"></iframe> </div> <div class="right-wrap" id="tree-sec"> <ul id="treehtml1"></ul> </div> </div> .... .... <script type="text/javascript"> var counter = 0; $(document).ready(function(){ $('.btn-search').click(function(){ if ($('#url').val() != '') { $.get('http://localhost/test/getHTML.php', {url:$('#url').val()}, function(response) { $('#preview-sec').html(response); },'html'); $.getJSON('http://localhost/test/results.json', function(json) { if(typeof(json) == "object"){ traverse(json,'html',1); makeCollapsible(); } }); } }); }); function traverse(obj, element, counter){ for (var i in obj){ $("#tree"+element+counter).append("<li id='"+i+counter+"'>"+i+"</li>"); // Add element to the tree if(obj[i].hasOwnProperty('child_nodes')){ $("#"+i+counter).append("<ul id='tree"+i+(counter+1)+"'></ul>"); // If there are children, add a parent ul and pass the name to subsequent recursive calls for each child for(var j in obj[i].child_nodes){ traverse(obj[i].child_nodes[j], i, counter + 1); // Recursive call to add child } } } } function makeCollapsible(){ $('ul.parent').each(function(i) { var parent_li = $(this).parent('li'); parent_li.addClass('collapsible'); //Use this selector to style your parent items... // Temporarily remove the list from the // parent list item, wrap the remaining // text in an anchor, then reattach it. var sub_ul = $(this).remove(); parent_li.wrapInner('<a/>').children('a').click(function() { // Toggle the children... sub_ul.toggle(); }); parent_li.append(sub_ul); }); // Hide all lists except the outermost. $('ul ul').hide(); } </script> .... .... This should provide a properly nested ul based tree. If creating an image of the tree is a hard requirement, you're best bet is to properly style the generated ul code fragment, create an html page with it on the server and then use a server side tool such as wkhtmltoimage from the wkhtmltopdf package that can be used to render the html document into an image.
Also, one other thing I would like to mention is that instead of loading the retrieved html into a div, I would recommend that you use an iframe as then, the retrieved html would not interfere with your current page. In my example above, I have added an iframe in the preview div. In such a case, you can use php to only output the json data and setting the iframe to preview the url would be as simple as assigning the url as the src attribute of the iframe. Like this: $("#preview").prop("src", $("#url").val()).
Edit: Updated code with a fix. Also added a new js function makeCollapsible() to retro-actively convert the ul into a clickable, collapsible tree structure as per OP's comment. Also added relevant CSS styles to style the tree structure. The tree now looks like the below picture for me:
108
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
