Convert JSON to HTML Popular

Updated: Mar 16, 2019

JSON to HTML Converter is used to convert JSON data or file to HTML markup. The arrays in the input JSON are flattened and converted to a tabular structure. This tabular data is then converted to HTML markup using <TABLE>, <TR> and <TD> tags.



Input: Paste JSON data below



Settings

HTML to JSON Converter

Convert HTML document to JSON by extracting HTML tables from it

View Tool
Background Information

JavaScript Object Notation (JSON) pronounced as "Jason" is the de facto standard for data interchange on the web these days. It is a simple format that is easier to comprehend than XML. It also has less size than XML because of no closing tags. Interacting with JSON from JavaScript is extremely seamless. JSON format was first specified by Douglas Crockford in the early 2000s

HTML is the language of the internet. It is what creates HTML pages (even this one). In the old days, HTML used to be static with some JavaScript added into the mix for dynamic behavior and effects. Then HTML was served dynamically from the server side with the advent of server side programming languages such as PERL, PHP, ASP. And now there is a new trend where HTML is again being served as static resources with JSON (from REST web services) and JavaScript making it dynamic.

Settings Explained

  • 1. Indentation

    This setting governs how the output is indented which is something that varies depending upon your text editor settings or server side scripting language/framework that generates HTML markup. You have choice between the following indentation levels:-

    • 2 Spaces
    • 3 Spaces
    • 4 Spaces
    • 1 Tab
    • None
    The indented output is easier for humans to comprehend. This is the most important use of this tool as people paste the minified or unformatted HTML that is generated by web servers and try to understand what's in it via indentation.

    2 Spaces

    <html>
      <body>
        <div>The name's Bond, James Bond.</div>
        <marqueue>Shaken, not stirred</marqueue>
      </body>
    </html>

    3 Spaces

    <html>
       <body>
          <div>The name's Bond, James Bond.</div>
          <marqueue>Shaken, not stirred</marqueue>
       </body>
    </html>

    4 Spaces

    <html>
        <body>
            <div>The name's Bond, James Bond.</div>
            <marqueue>Shaken, not stirred</marqueue>
        </body>
    </html>

    1 Tab

    <html>
    	<body>
    		<div>The name's Bond, James Bond.</div>
    		<marqueue>Shaken, not stirred</marqueue>
    	</body>
    </html>

    None

    <html>
    <body>
    <div>The name's Bond, James Bond.</div>
    <marqueue>Shaken, not stirred</marqueue>
    </body>
    </html>
  • 2. Path Delimiter

    This setting governs how the column names are formed in complex JSON structures which have nested objects. You can choose between any of the 4 delimiters which will be used to join the property names and create the output CSV column.

    Uderscore Path Delimiter

    name|department|address_city|address_state
    John Doe|Engineering|Atlanta|Georgia
    Jane Doe|Billingr|Hayward|California

    Double Underscore Path Delimiter

    name|department|address__city|address__state
    John Doe|Engineering|Atlanta|Georgia
    Jane Doe|Billingr|Hayward|California

    Slash Path Delimiter

    name|department|address/city|address/state
    John Doe|Engineering|Atlanta|Georgia
    Jane Doe|Billingr|Hayward|California

    Dot Path Delimiter

    name|department|address.city|address.state
    John Doe|Engineering|Atlanta|Georgia
    Jane Doe|Billingr|Hayward|California
  • 3. Cleanse Boolean Values

    If selected, Boolean values in Sentence & Capital cases such as True, False, TRUE & FALSE are transformed to their lowercase versions before conversion to CSV. This makes sure that the JSON is valid by cleansing the boolean values. According to the JSON specification, such boolean values are invalid and only lowercase true/false are valid.

    Use this if your input JSON has such boolean values in Sentence or Capital casing. However, this will also transform such words inside JSON strings (i.e inside double quotes)

  • 4. Handle Multiple Jsons

    If selected, multiple JSONs in the input are handled. Each Valid JSON must completely exist in one line.

    Handle Multiple Jsons On

    The following input works

    {"name": "Robin Hood","department": "","manager": "","salary": 200}
    {"name": "Arsene Wenger","department": "Bar","manager": "Friar Tuck","salary": 50}
    {"name": "Friar Tuck","department": "Foo","manager": "Robin Hood","salary": 100}

    Handle Multiple Jsons Off

    The following input does not work

    {"name": "Robin Hood","department": "","manager": "","salary": 200}
    {"name": "Arsene Wenger","department": "Bar","manager": "Friar Tuck","salary": 50}
    {"name": "Friar Tuck","department": "Foo","manager": "Robin Hood","salary": 100}
  • 5. Use TH Tags

    If selected, TH tags are used in place of TD for the header row

 

Comments 0


History

Mar 16, 2019
Support for TH header tags
Mar 15, 2019
Tool Launched