Map HTML to JSON

html to json php
html2json python
convert html to json c#
html to json java
generate html from json
javascript json
json.parse array of objects
convert string to json

I'm attempting map HTML into JSON with structure intact. Are there any libraries out there that do this or will I need to write my own? I suppose if there are no html2json libraries out there I could take an xml2json library as a start. After all, html is only a variant of xml anyway right?

UPDATE: Okay, I should probably give an example. What I'm trying to do is the following. Parse a string of html:

<div>
  <span>text</span>Text2
</div>

into a json object like so:

{
  "type" : "div",
  "content" : [
    {
      "type" : "span",
      "content" : [
        "Text2"
      ]
    },
    "Text2"
  ]
}

NOTE: In case you didn't notice the tag, I'm looking for a solution in Javascript

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.

Enjoy

HTML To JSON Converter, Select an HTML file or Load HTML from a url or Enter HTML data and convert it to JSON. After conversion, you can beautify JSON and download converted JSON  JSON: chapter “Creating and parsing JSON” of “JavaScript for impatient programmers” Arbitrary Maps as JSON via Arrays of pairs # If a Map contains arbitrary (JSON-compatible) data, we can convert it to JSON by encoding it as an Array of key-value pairs (2-element Arrays). Converting a Map to and from an Array of pairs # The spread

html2json & json2html on GitHub, which is built on John Resig's htmlparser.js, includes a few test cases and worked great for me.

JSON.parse(), the data is always a string. Parse the data with JSON.parse() , and the data becomes a JavaScript object. Use the JavaScript function JSON.parse() to convert text into a JavaScript object: Login Form · HTML Includes · Google Maps The map() method creates a new array with the results of calling a function for every array element. The map() method calls the provided function once for each element in an array, in order. Note: map() does not execute the function for array elements without values. Note: this method does not change the original array.

Representing complex HTML documents will be difficult and full of corner cases, but I just wanted to share a couple techniques to show how to get this kind of program started. This answer differs in that it uses data abstraction and the toJSON method to recursively build the result

Below, html2json is a tiny function which takes an HTML node as input and it returns a JSON string as the result. Pay particular attention to how the code is quite flat but it's still plenty capable of building a deeply nested tree structure – all possible with virtually zero complexity

// data Elem = Elem Node

const Elem = e => ({
  toJSON : () => ({
    tagName: 
      e.tagName,
    textContent:
      e.textContent,
    attributes:
      Array.from(e.attributes, ({name, value}) => [name, value]),
    children:
      Array.from(e.children, Elem)
  })
})

// html2json :: Node -> JSONString
const html2json = e =>
  JSON.stringify(Elem(e), null, '  ')
  
console.log(html2json(document.querySelector('main')))
<main>
  <h1 class="mainHeading">Some heading</h1>
  <ul id="menu">
    <li><a href="/a">a</a></li>
    <li><a href="/b">b</a></li>
    <li><a href="/c">c</a></li>
  </ul>
  <p>some text</p>
</main>

JSON.stringify(), Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The Google Maps Data Layer provides a container for arbitrary geospatial data (including GeoJSON). If your data is in a file hosted on the same domain as your Maps JavaScript API application, you

This one looks pretty good JSON to HTML and HTML to JSON https://github.com/andrejewski/himalaya

JSON HTML, JavaScript can be used to make HTML in your web pages. HTML Table. Make an HTML table with data received as JSON: Example. obj = { table:  It is quite common to convert Java Arrays and Maps into JSON and vice versa. In this post, we look at 3 different examples to convert Java Map to JSON. We will be using Jackson, Gson and org.json libraries. Java Map to JSON using Jackson. The following example uses Jackson Core and Jackson Binding to convert Java Map to JSON.

I got few links sometime back while reading on ExtJS full framework in itself is JSON.

http://www.thomasfrank.se/xml_to_json.html

http://camel.apache.org/xmljson.html

online XML to JSON converter : http://jsontoxml.utilities-online.info/

UPDATE BTW, To get JSON as added in question, HTML need to have type & content tags in it too like this or you need to use some xslt transformation to add these elements while doing JSON conversion

<?xml version="1.0" encoding="UTF-8" ?>
<type>div</type>
<content>
    <type>span</type>
    <content>Text2</content>
</content>
<content>Text2</content>

html-to-json, Learn about our RFC process, Open RFC meetings & more.Join in the discussion​! » html-to-json. 0.6.0 • Public • Published 5 years ago. We don’t have to drill down to any directory since the json file is in the same directory as our index.html. The fetch function will return a promise. When the JSON data is fetched from the file, the then function will run with the JSON data in the response. If anything goes wrong (like the JSON file cannot be found), the catch function will run.

Importing Data into Maps | Maps JavaScript API, JavaScript HTML to JSON Parser - http://andrejewski.github.io/himalaya · himalaya html parser json javascript. Star 669. Watch  Returns true if an element in the Map object existed and has been removed, or false if the element does not exist. Map.prototype.has(key) will return false afterwards. Map.prototype.entries() Returns a new Iterator object that contains an array of [key, value] for each element in the Map object in insertion order. Map.prototype.forEach

andrejewski/himalaya: JavaScript HTML to JSON Parser, A few things: I'm not sure why you need to map over the top level object? Are there top-level keys other than dataset that you're interested in? Because JSON is derived from the JavaScript programming language, it is a natural choice to use as a data format in JavaScript. JSON, short for JavaScript Object Notation, is usually pronounced like the name “Jason.” To learn more about JSON in general terms, read the “An Introduction to JSON” tutorial.

Mapping JSON object to HTML, It parses a JSON String and recursively converts it to a list or map of objects. new URL('http://groovy-lang.org/json.html#_jsonoutput')) def generator = new  The map() method creates a new array populated with the results of calling a provided function on every element in the calling array. MDN will be in maintenance mode for a brief period Wednesday June 10, from around 3:00 PM until no later than 4:00 PM Pacific (in UTC, Wednesday June 10, 10:00 PM to 11:00 PM).

Comments
  • what are you trying to achieve in general?
  • What's your environment? Browser? Server?
  • Possible duplicate, if you are okay with using jQuery: stackoverflow.com/questions/6918249/jquery-html-to-json
  • @zzzzBov you'll need to do a whole lot more than 'just iterating' through the dom to be a good html2json parser I assume. the idea of this question is to see if somebody did this job already and whether I can use it/learn from it...
  • @nimrod, create a document fragment using your HTML string, and let the DOM do the work for you. It doesn't have to be appended to the page for you to take advantage of the web browser's HTML parsing abilities.
  • although I'd want to make it work with a string really, rather than reading from the dom...
  • @nimrod I updated the function, it now works with ether a string containing valid xhtml or an element.
  • @nimrod Glad it works. I hadn't heard of it ether, I learned a lot while writing this.
  • kudos to you for going as far as to learn something new to answer a stackoverflow question!
  • I think it's just better to use e-json from EHTML: github.com/Guseyn/EHTML
  • Having a hard time getting values into attributes, but this is by far the most preferred effort. much smaller than installing an entire library.
  • your my new hero
  • I was thinking the type could just be the tag-title or the type of content eg. 'string'