convert HTML DOM structure to JSON
I'm new here and i couldn't find how to post a comment. I wanted to ask you if this is always the structure, no matter the dept. If the answer is no, then don't read my answer :).
So first of all i added a function getPrevious, because directly trying to get the previous sibling returns you a text node. Next i changed the recursion a little bit, because it's not a simple recursion, the json format (the parent-child relations) is different then the html format. I tried it for 2 more levels and it's ok. I hope it's helpful and sorry if it's not.
function getPrevious(element)
{
var prev_el = element.previousSibling;
while (prev_el.nodeType == 3)
{
prev_el = prev_el.previousSibling;
}
return prev_el;
}
function recursive(element){
//var classname = element.className.split(' ');
// element.nodeName == 'UL'
var Result = {"title": '', "json": {}};
var json = {};
var cur_json_key = '';
if( element.nodeType == 3 )
return;
else{
//console.log( element.nodeType, element );
var nodeName = element.nodeName.toLowerCase();
var nodeClass = element.className.toLowerCase();
// if this is the SPAN with class 'TITLE', then create an object with the innerHTML as KEY
// and later the value should be another object, returned from the recursion...
if( nodeName == 'span' && nodeClass == 'title' ){
json[element.innerHTML] = {};
Result.title = element.innerHTML;
Result.json = json;
}
else
if( nodeName == 'input' ){
// if this is an INPUT field, then the SPAN sibling before it is the KEY.
var key = getPrevious(element).innerHTML;
var val = element.value;
Result.json[key] = val;
}
else
{
var is_title_found = 0;
var title_found = '';
var res = {}
// go deeper
for( var child=0; child < element.childNodes.length; child++ ){
//json = $.extend( {}, recursive( element.childNodes[child] ));
res = recursive( element.childNodes[child]);
if (res)
{
if (res.title != '')
{
is_title_found = 1;
title_found = res.title;
}
else
{
$.extend(true, json, res.json);
}
console.log(JSON.stringify(json));
}
}
if (title_found)
{
Result.json[title_found] = json
}
else
{
Result.json = json;
}
}
return Result;
}
}
If you can convince yourself to using jQuery, try this:
function helper(root) {
var result = {};
$('> ul > li > span', root).each(function () {
result[$(this).text()] = $(this).hasClass('title') ? helper($(this).parent()) : $(this).next('input').val();
});
return result;
}
console.log(helper('body'));