Map HTML to Json

Map HTML to JSON

I just wrote this function that does what you want; try it out let me know if it doesn't work correctly for you:

// Test with an element.
var initElement = document.getElementsByTagName("html")[0];
var json = mapDOM(initElement, true);
console.log(json);

// Test with a string.
initElement = "<div><span>text</span>Text2</div>";
json = mapDOM(initElement, true);
console.log(json);

function mapDOM(element, json) {
    var treeObject = {};
    
    // If string convert to document Node
    if (typeof element === "string") {
        if (window.DOMParser) {
              parser = new DOMParser();
              docNode = parser.parseFromString(element,"text/xml");
        } else { // Microsoft strikes again
              docNode = new ActiveXObject("Microsoft.XMLDOM");
              docNode.async = false;
              docNode.loadXML(element); 
        } 
        element = docNode.firstChild;
    }
    
    //Recursively loop through DOM elements and assign properties to object
    function treeHTML(element, object) {
        object["type"] = element.nodeName;
        var nodeList = element.childNodes;
        if (nodeList != null) {
            if (nodeList.length) {
                object["content"] = [];
                for (var i = 0; i < nodeList.length; i++) {
                    if (nodeList[i].nodeType == 3) {
                        object["content"].push(nodeList[i].nodeValue);
                    } else {
                        object["content"].push({});
                        treeHTML(nodeList[i], object["content"][object["content"].length -1]);
                    }
                }
            }
        }
        if (element.attributes != null) {
            if (element.attributes.length) {
                object["attributes"] = {};
                for (var i = 0; i < element.attributes.length; i++) {
                    object["attributes"][element.attributes[i].nodeName] = element.attributes[i].nodeValue;
                }
            }
        }
    }
    treeHTML(element, treeObject);
    
    return (json) ? JSON.stringify(treeObject) : treeObject;
}

Working example: http://jsfiddle.net/JUSsf/ (Tested in Chrome, I can't guarantee full browser support - you will have to test this).

​It creates an object that contains the tree structure of the HTML page in the format you requested and then uses JSON.stringify() which is included in most modern browsers (IE8+, Firefox 3+ .etc); If you need to support older browsers you can include json2.js.

It can take either a DOM element or a string containing valid XHTML as an argument (I believe, I'm not sure whether the DOMParser() will choke in certain situations as it is set to "text/xml" or whether it just doesn't provide error handling. Unfortunately "text/html" has poor browser support).

You can easily change the range of this function by passing a different value as element. Whatever value you pass will be the root of your JSON map.

Map html element to json object

Recursive function that builds the json. To ensure no issues with the keys (that have a possibility to be duplicates) the following was added :n where n is the index of the element.

function htmlToObject(targetElement) {  return Array    .from(targetElement.children)    .reduce((acc, cur, i) => {      acc[`${cur.tagName}:${i}`.toLowerCase()] = htmlToObject(cur);      return acc;    }, {});}
const startElement = document.getElementsByClassName("myparent")[0];
const res = {  [startElement.tagName.toLowerCase()]: htmlToObject(startElement)};
console.log(res);

<div class='myparent'>  <div>    <div class="pdp-product-price">      <span> 650 rupees</span>      <div class="origin-block">        <span> 1,500 rupees</span>        <span>-57%</span>      </div>    </div>  </div></div>

//  This gives you an HTMLElement object
var element = document.getElementById('TextBoxesGroup');
//  This gives you a string representing that element and its content
var html = element.outerHTML;       
//  This gives you a JSON object that you can send with jQuery.ajax's `data`
// option, you can rename the property to whatever you want.
var data = { html: html }; 

//  This gives you a string in JSON syntax of the object above that you can 
// send with XMLHttpRequest.
var json = JSON.stringify(data);

function createPaths(aliases, propName, path) {    aliases.set(propName, path);}
var map = new Map(),    object = {};
createPaths(map, 'paths.aliases.server.entry', 'src/test');createPaths(map, 'paths.aliases.dist.entry', 'dist/test');
map.forEach((value, key) => {    var keys = key.split('.'),        last = keys.pop();    keys.reduce((r, a) => r[a] = r[a] || {}, object)[last] = value;});
console.log(object);

var mergedSections = {};
var section = $(".section").map(function() {
  var section_id = $(this).attr("id");

  var data = $(this).find(':input').map(function() {
    var obj = {};
    obj['id'] = $(this).attr("id");
    obj['value'] = $(this).val();
    return obj;
  }).get();

  mergedSections[section_id] = data;
});
console.log(mergedSections);

console.log([mergedSections]);

var sections = [];

var eTitles = $('article').find('h2');

$(eTitles).each(function(){
  var section = {
    "title": {
      "text": $(this).text(),
      "href": $(this).find('a').attr('href')
    },
    "subtitles": []
  }

  var eSubtitles = $(this).nextUntil('h2').filter('h3, h4, h5');

  $(eSubtitles).each(function(){
    var subtitle = {
      "text": $(this).text(),
      "href": $(this).find('a').attr('href')
    }

    section.subtitles.push(subtitle);
  });

  sections.push(section);
});

<p dangerouslySetInnerHTML={{__html: p.body}}></p>

<button id="distance-btn" onClick="getDistance()">
  Click here for distance
</button>
<div id="distance"></div>

function getDistance() {
  const origin = '53.487362,-2.227197';
  const destination = '51.516595,-0.129279';

  var distanceService = new google.maps.DistanceMatrixService();
  distanceService.getDistanceMatrix({
    origins: [origin],
    destinations: [destination],
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.IMPERIAL,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status !== 'OK') {
      alert('Error was: ' + status);
    } else {
      const distance = response.rows[0].elements[0].distance.text
      document.getElementById('distance').innerText = distance;
    }
  });
}