Display JSON as HTML

Question

Any recommendations on how to embed JSON in an HTML page with the JSON formatted in a human readable style  For example  when you view XML in a browser  most browsers display the XML formatted  indented  proper line breaks  etc   I d like the same end result for JSON   Color syntax highlighting would be a bonus   Thanks

User · Answer

something like this      pretty-json  https   github com warfares pretty-json  live sample   http   warfares github com pretty-json

User · Answer

For the syntax highlighting  use code prettify  I believe this is what StackOverflow uses for its code highlighting    Wrap your formatted JSON in code blocks and give them the  prettyprint  class  Include prettify js in your page  Make sure your document s body tag calls prettyPrint   when it loads   You will have syntax highlighted JSON in the format you have laid out in your page  See here for an example  So if you had a code block like this    lt code class  prettyprint  gt      var jsonObj              height    6 2           width    7 3           length    9 1           color                   r    255               g    200               b    10                  lt  code gt    It would look like this   var jsonObj          height    6 2       width    7 3       length    9 1       color               r    255           g    200           b    10           This doesn t help with the indenting  but the other answers seem to be addressing that

User · Answer

I think you meant something like this  JSON Visualization  Don t know if you might use it  but you might ask the author

User · Answer

You can use the JSON stringify function with unformatted JSON  It outputs it in a formatted way    JSON stringify   foo   sample   bar   sample     null  4    This turns     foo    sample    bar    sample      into           foo    sample          bar    sample        Now the data is a readable format you can use the Google Code Prettify script as suggested by  A  Levy to colour code it   It is worth adding that IE7 and older browsers do not support the JSON stringify method

User · Answer

If you are deliberately displaying it for the end user  wrap the JSON text in  lt PRE gt  and  lt CODE gt  tags  e g     lt html gt   lt body gt   lt pre gt   lt code gt                  color   red           value    f00                       color   green           value    0f0                       color   blue           value    00f                       color   cyan           value    0ff                       color   magenta           value    f0f                       color   yellow           value    ff0                       color   black           value    000            lt  code gt   lt  pre gt   lt  body gt   lt  html gt    Otherwise I would use JSON Viewer

User · Answer

Your best bet is going to be using your back-end language s tools for this  What language are you using  For Ruby  try json printer

User · Answer

First take the JSON string and make real objects out of it   Loop though all of the properties of the object  placing the items in an unordered list   Every time you get to a new object  make a new list

User · Answer

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript  To get an idea of what SyntaxHighlighter is capable of  have a look at the demo page

User · Answer

If you re just looking to do this from a debugging standpoint  you can use a Firefox plugin such as JSONovich to view the JSON content   The new version of Firefox that is currently in beta is slated to natively support this  much like XML

User · Answer

Here s a javasript tool that will convert JSON to XML and vice versa  which should enhance its readability   You could then create a style sheet to color it or do a complete transform to HTML   http   www xml com pub a 2006 05 31 converting-between-xml-and-json html

User · Answer

Here s a light-weight solution  doing only what OP asked  including highlighting but nothing else  How can I pretty-print JSON using JavaScript

User · Answer

Could use JSON2HTML to transform it to nicely formatted HTML list    may be a little more powerful than you really need though  http   json2html com

[html] Display JSON as HTML

Examples related to html

Examples related to json