pretty-print JSON using JavaScript

Question

How can I display JSON in an easy-to-read  for human readers  format  I m looking primarily for indentation and whitespace  with perhaps even colors   font-styles   etc

User · Answer

var jsonObj     streetLabel    Avenue Anatole France    city    Paris 07     postalCode    75007    countryCode    FRA     countryLabel    France      document getElementById  result-before   innerHTML   JSON stringify jsonObj     In case of displaying in HTML  you should to add a balise  lt pre gt  lt  pre gt   document getElementById  result-after   innerHTML     lt pre gt   JSON stringify jsonObj undefined  2     lt  pre gt     Example    x000D   x000D  var jsonObj     streetLabel    Avenue Anatole France    city    Paris 07     postalCode    75007    countryCode    FRA     countryLabel    France     x000D   x000D  document getElementById  result-before   innerHTML   JSON stringify jsonObj   x000D   x000D  document getElementById  result-after   innerHTML     lt pre gt   JSON stringify jsonObj undefined  2     lt  pre gt   x000D  div   float left  clear both  margin  1em 0    x000D   lt div id  result-before  gt  lt  div gt  x000D   lt div id  result-after  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Pretty-printing is implemented natively in JSON stringify    The third argument enables pretty printing and sets the spacing to use   var str   JSON stringify obj  null  2      spacing level   2   If you need syntax highlighting  you might use some regex magic like so   function syntaxHighlight json        if  typeof json     string              json   JSON stringify json  undefined  2             json   json replace   amp  g    amp amp    replace   lt  g    amp lt    replace   gt  g    amp gt         return json replace       u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g  function  match            var cls    number           if       test match                 if       test match                     cls    key                 else                   cls    string                           else if   true false  test match                 cls    boolean             else if   null  test match                 cls    null                     return   lt span class      cls      gt     match     lt  span gt                See in action here  jsfiddle  Or a full snippet provided below    x000D   x000D  function output inp    x000D      document body appendChild document createElement  pre    innerHTML   inp  x000D    x000D   x000D  function syntaxHighlight json    x000D      json   json replace   amp  g    amp amp    replace   lt  g    amp lt    replace   gt  g    amp gt     x000D      return json replace       u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g  function  match    x000D          var cls    number   x000D          if       test match     x000D              if       test match     x000D                  cls    key   x000D                else   x000D                  cls    string   x000D                x000D            else if   true false  test match     x000D              cls    boolean   x000D            else if   null  test match     x000D              cls    null   x000D            x000D          return   lt span class      cls      gt     match     lt  span gt    x000D          x000D    x000D   x000D  var obj    a 1   b   foo   c  false  false  null   null    d  e 1 3e5 f  1 3e5       x000D  var str   JSON stringify obj  undefined  4   x000D   x000D  output str   x000D  output syntaxHighlight str    x000D  pre  outline  1px solid  ccc  padding  5px  margin  5px    x000D   string   color  green    x000D   number   color  darkorange    x000D   boolean   color  blue    x000D   null   color  magenta    x000D   key   color  red    x000D   x000D   x000D

User · Answer

I d like to show my jsonAnalyze method here  it does a pretty print of the JSON structure only  but in some cases can be more usefull that printing the whole JSON  Say you have a complex JSON like this  let theJson      username    elen    email    elen test com    state    married    profiles           name    elenLove    job    actor           name    elenDoe    job    spy       hobbies     run    movies     status          home               ownsHome   true           addresses                   town    Mexico    address    123 mexicoStr                  town    Atlanta    address    4B atlanta 45-48                          car              ownsCar   true           cars                   brand    Nissan    plate    TOKY-114    prevOwnersIDs     4532354531    3454655344    5566753422                   brand    Benz    plate    ELEN-1225    prevOwnersIDs     4531124531    97864655344    887666753422                        active   true   employed   false      Then the method will return the structure like this  username email state profiles       profiles   name     profiles   job hobbies   status       status   home           status   home   ownsHome         status   home   addresses               status   home   addresses   town             status   home   addresses   address     status   car           status   car   ownsCar         status   car   cars               status   car   cars   brand             status   car   cars   plate             status   car   cars   prevOwnersIDs   active employed  So this is the jsonAnalyze   code  function jsonAnalyze obj            let arr               analyzeJson obj  null  arr           return logBeautifiedDotNotation arr        function analyzeJson obj  parentStr  outArr            let opt          if   outArr                return  quot no output array given quot                    for  let prop in obj                opt   parentStr   parentStr         prop   prop              if  Array isArray obj prop    amp  amp  obj prop      null                        let arr   obj prop                   if   Array isArray arr 0      typeof arr 0      quot object quot    amp  amp  arr 0     null                                                outArr push opt                              analyzeJson arr 0   opt         outArr                     else                       outArr push opt                                          else if  typeof obj prop      quot object quot   amp  amp  obj prop      null                        outArr push opt                              analyzeJson obj prop   opt         outArr                 else                   if  obj hasOwnProperty prop   amp  amp  typeof obj prop      function                         outArr push opt                                                        function logBeautifiedDotNotation arr            retStr               arr map function  item                let dotsAmount   item split  quot   quot   length - 1              let dotsString   Array dotsAmount   1  join                      retStr    dotsString   item     n               console log dotsString   item                      return retStr           jsonAnalyze theJson

User · Answer

lt  -- here is a complete example pretty print with more space between lines-- gt   lt  -- be sure to pass a json string not a json object -- gt   lt  -- use line-height to increase or decrease spacing between json lines -- gt    lt style  type  text css  gt   preJsonTxt    font-size  18px    text-overflow  ellipsis    overflow  hidden    line-height  200      boxedIn    border  1px solid black    margin  20px    padding  20px     lt  style gt    lt div class  boxedIn  gt       lt h3 gt Configuration Parameters lt  h3 gt       lt pre id  jsonCfgParams  class  preJsonTxt  gt    cfgParams    lt  pre gt   lt  div gt    lt script language  JavaScript  gt     document   ready function            formatJson          lt  -- this will do a pretty print on the json cfg params      -- gt       function formatJson              var element       jsonCfgParams             var obj   JSON parse element text             element html JSON stringify obj  undefined  2                lt  script gt

User · Answer

Here s user123444555621 s awesome HTML one adapted for terminals  Handy for debugging Node scripts   function prettyJ json      if  typeof json      string         json   JSON stringify json  undefined  2         return json replace       u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g       function  match          let cls     x1b 36m         if       test match             if       test match               cls     x1b 34m             else             cls     x1b 32m                     else if   true false  test match             cls     x1b 35m            else if   null  test match             cls     x1b 31m                 return cls   match     x1b 0m                  Usage      thing   any json OR string of json prettyJ thing

User · Answer

I use the JSONView Chrome extension  it is as pretty as it gets      Edit  added jsonreport js  I ve also released an online stand-alone JSON pretty print viewer  jsonreport js  that provides a human readable HTML5 report you can use to view any JSON data   You can read more about the format in New JavaScript HTML5 Report Format

User · Answer

You can use JSON stringify your object  null  2  The second parameter can be used as a replacer function which takes key and Val as parameters This can be used in case you want to modify something within your JSON object   more reference   https   developer mozilla org en-US docs Web JavaScript Reference Global Objects JSON stringify

User · Answer

User Pumbaa80 s answer is great if you have an object you want pretty printed  If you re starting from a valid JSON string that you want to pretty printed  you need to convert it to an object first   var jsonString      some   json     var jsonPretty   JSON stringify JSON parse jsonString  null 2       This builds a JSON object from the string  and then converts it back to a string using JSON stringify s pretty print

User · Answer

This is nice   https   github com mafintosh json-markup from mafintosh  const jsonMarkup   require  json-markup   const html   jsonMarkup  hello  world    document querySelector   myElem   innerHTML   html   HTML   lt link ref  stylesheet  href  style css  gt   lt div id  myElem gt  lt  div gt    Example stylesheet can be found here  https   raw githubusercontent com mafintosh json-markup master style css

User · Answer

Here is how you can print without using native function   function pretty ob  lvl   0       let temp          if typeof ob      object        for let x in ob          if ob hasOwnProperty x             temp push  getTabs lvl 1    x         pretty ob x   lvl 1                       return    n   temp join    n      n    getTabs lvl               else       return ob          function getTabs n      let c   0  res         while c    lt  n      res    t     return res     let obj    a   b  2   x   y  3    console log pretty obj                a          b  2            x          y  3

User · Answer

For debugging purpose I use    console debug   o   data      https   getfirebug com wiki index php Console API https   developer mozilla org en-US docs DOM console

User · Answer

Better way   Prettify JSON Array in Javascript  JSON stringify jsonobj null   t

User · Answer

Unsatisfied with other pretty printers for Ruby  I wrote my own  NeatJSON  and then ported it to JavaScript including a free online formatter  The code is free under MIT license  quite permissive    Features  all optional     Set a line width and wrap in a way that keeps objects and arrays on the same line when they fit  wrapping one value per line when they don t  Sort object keys if you like  Align object keys  line up the colons   Format floating point numbers to specific number of decimals  without messing up the integers   Short  wrapping mode puts opening and closing brackets braces on the same line as values  providing a format that some prefer  Granular control over spacing for arrays and objects  between brackets  before after colons and commas  Function is made available to both web browsers and Node js    I ll copy the source code here so that this is not just a link to a library  but I encourage you to go to the GitHub project page  as that will be kept up-to-date and the code below will not    function exports   exports neatJSON   neatJSON   function neatJSON value opts     opts   opts         if     wrap           in opts   opts wrap   80    if  opts wrap  true  opts wrap   -1    if     indent         in opts   opts indent           if     arrayPadding   in opts   opts arrayPadding      padding  in opts    opts padding   0    if     objectPadding  in opts   opts objectPadding     padding  in opts    opts padding   0    if     afterComma     in opts   opts afterComma        aroundComma  in opts    opts aroundComma   0    if     beforeComma    in opts   opts beforeComma       aroundComma  in opts    opts aroundComma   0    if     afterColon     in opts   opts afterColon        aroundColon  in opts    opts aroundColon   0    if     beforeColon    in opts   opts beforeColon       aroundColon  in opts    opts aroundColon   0     var apad    repeat     opts arrayPadding         opad    repeat     opts objectPadding         comma   repeat     opts beforeComma      repeat     opts afterComma         colon   repeat     opts beforeColon      repeat     opts afterColon      return build value         function build o indent       if  o   null    o   undefined  return indent  null       else        switch o constructor           case Number            var isFloat    o      o  amp  amp  o      o 0              return indent     isFloat  amp  amp    decimals  in opts     o toFixed opts decimals     o                case Array            var pieces    o map function v   return build v                   var oneLine   indent     apad pieces join comma  apad                if  opts wrap   false    oneLine length lt  opts wrap  return oneLine            if  opts short               var indent2   indent     apad              pieces   o map function v   return build v indent2                  pieces 0    pieces 0  replace indent2 indent     apad               pieces pieces length-1    pieces pieces length-1  apad                  return pieces join    n               else              var indent2   indent opts indent              return indent    n  o map function v   return build v indent2     join    n     n  indent                           case Object            var keyvals    i 0            for  var k in o  keyvals i       JSON stringify k   build o k                  if  opts sorted  keyvals   keyvals sort function kv1 kv2   kv1 kv1 0   kv2 kv2 0   return kv1 lt kv2 -1 kv1 gt kv2 1 0               keyvals   keyvals map function kv   return kv join colon     join comma             var oneLine   indent     opad keyvals opad                if  opts wrap   false    oneLine length lt opts wrap  return oneLine            if  opts short               var keyvals    i 0              for  var k in o  keyvals i       indent     opad JSON stringify k  o k                if  opts sorted  keyvals   keyvals sort function kv1 kv2   kv1 kv1 0   kv2 kv2 0   return kv1 lt kv2 -1 kv1 gt kv2 1 0                 keyvals 0  0    keyvals 0  0  replace indent     indent                   if  opts aligned                 var longest   0                for  var i keyvals length i--   if  keyvals i  0  length gt longest  longest   keyvals i  0  length                var padding   repeat     longest                 for  var i keyvals length i--   keyvals i  0    padRight padding keyvals i  0                              for  var i keyvals length i--                  var k keyvals i  0   v keyvals i  1                 var indent2   repeat      k colon  length                 var oneLine   k colon build v                    keyvals i     opts wrap   false    oneLine length lt  opts wrap     v    typeof v   object     oneLine    k colon build v indent2  replace    s                                   return keyvals join    n     opad                   else              var keyvals    i 0              for  var k in o  keyvals i       indent opts indent JSON stringify k  o k                if  opts sorted  keyvals   keyvals sort function kv1 kv2   kv1 kv1 0   kv2 kv2 0   return kv1 lt kv2 -1 kv1 gt kv2 1 0                 if  opts aligned                 var longest   0                for  var i keyvals length i--   if  keyvals i  0  length gt longest  longest   keyvals i  0  length                var padding   repeat     longest                 for  var i keyvals length i--   keyvals i  0    padRight padding keyvals i  0                              var indent2   indent opts indent              for  var i keyvals length i--                  var k keyvals i  0   v keyvals i  1                 var oneLine   k colon build v                    keyvals i     opts wrap   false    oneLine length lt  opts wrap     v    typeof v   object     oneLine    k colon build v indent2  replace    s                                   return indent    n  keyvals join    n     n  indent                          default            return indent JSON stringify o                        function repeat str times      http   stackoverflow com a 17800645 405017     var result           while true         if  times  amp  1  result    str        times  gt  gt   1        if  times  str    str        else break            return result        function padRight pad  str       return  str   pad  substring 0  pad length         neatJSON version    0 5       typeof exports      undefined    this   exports

User · Answer

I ran into an issue today with  Pumbaa80 s code  I m trying to apply JSON syntax highlighting to data that I m rendering in a Mithril view  so I need to create DOM nodes for everything in the JSON stringify output   I split the really long regex into its component parts as well   render json    data  - gt      wraps JSON data in span elements so that syntax highlighting may be     applied  Should be placed in a  whitespace  pre  context   if typeof data  isnt  string      data   JSON stringify data  undefined  2    unicode            u a-zA-Z0-9  4      u             s        keyword         b true false null  b    whitespace      s     punctuation                  number         -  d       d       eE    -   d        syntax          unicode  keyword  whitespace              punctuation  number  map  r  - gt  r source  join              parser   new RegExp syntax   g      nodes   data match parser         select class    node  - gt      if punctuation test node        return  punctuation      if    s    test node        return  whitespace      if       test node        if      test node          return  key        return  string       if  true false  test node        return  boolean        if  null  test node         return  null       return  number    return nodes map  node  - gt      cls   select class node      return Mithril  span    class  cls   node    Code in context on Github here

User · Answer

If you need this to work in a textarea the accepted solution will not work    lt textarea id  textarea  gt  lt  textarea gt       textarea   append formatJSON JSON stringify jsonobject  true        function formatJSON json textarea        var nl      if textarea            nl     amp  13  amp  10          else           nl     lt br gt              var tab     amp  160  amp  160  amp  160  amp  160        var ret           var numquotes   0      var betweenquotes   false      var firstquote   false      for  var i   0  i  lt  json length  i              var c   json i           if c                       numquotes                 if  numquotes   2    2    1                    betweenquotes   true                else                   betweenquotes   false                            if  numquotes   3    4    0                    firstquote   true                else                   firstquote   false                                   if c         amp  amp   betweenquotes                ret    c              ret    nl              continue                    if c         amp  amp   betweenquotes                ret    tab              ret    c              ret    nl              continue                    if c         amp  amp  firstquote                ret    tab   tab              ret    c              continue            else if  c         amp  amp   firstquote                ret    c              continue                    if c         amp  amp   betweenquotes                ret    c              ret    nl              continue                    if c         amp  amp   betweenquotes                ret    nl              ret    tab              ret    c              continue                    if c         amp  amp   betweenquotes                ret    nl              ret    c              continue                    ret    c           i loop     return ret

User · Answer

Douglas Crockford s JSON in JavaScript library will pretty print JSON via the stringify method   You may also find the answers to this older question useful  How can I pretty-print JSON in  unix  shell script

User · Answer

You can use console dir    which is a shortcut for console log util inspect      The only difference is that it bypasses any custom inspect   function defined on an object    It uses syntax-highlighting  smart indentation  removes quotes from keys and just makes the output as pretty as it gets   const object   JSON parse jsonString   console dir object   depth  null  colors  true     and for the command line   cat package json   node -e  process stdin pipe new stream Writable  write  chunk   gt  console dir JSON parse chunk    depth  null  colors  true

User · Answer

Thanks a lot  all  Based on the previous answers  here is another variant method providing custom replacement rules as parameter    renderJSON   function json  rr  code  pre      if  typeof json      string           json   JSON stringify json  undefined    t           var rules        def    color black           defKey   function match                return   lt strong gt     match     lt  strong gt                    types                        name    True             regex    true             type    boolean             style    color lightgreen                                 name    False             regex    false             type    boolean             style    color lightred                                 name    Unicode             regex        u a-zA-Z0-9  4      u             s                 type    string             style    color green                                 name    Null             regex    null             type    nil             style    color magenta                                 name    Number             regex    -  d       d       eE    -   d                type    number             style    color darkorange                                 name    Whitespace             regex     s              type    whitespace             style   function match                return   amp nbsp                                      keys                         name    Testkey              regex      testkey                type    key              style   function match                return   lt h1 gt     match     lt  h1 gt                                     punctuation               name    Punctuation             regex                                 type    punctuation             style   function match                return   lt p gt          lt  p gt                                  if  undefined      typeof jQuery        rules     extend rules    object      typeof rr    rr             else       for var k in rr            rules k    rr k                  var str   json replace                      u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g  function  match        var i   0  p      if  rules punctuation regex test match                    if  string      typeof rules punctuation style                      return   lt span style     rules punctuation style      gt     match     lt  span gt                    else if  function      typeof rules punctuation style                      return rules punctuation style match                    else                    return match                                          if       test match             if       test match                 for i 0 i lt rules keys length i                 p   rules keys i               if  p regex test match                    if  string      typeof p style                      return   lt span style     p style      gt     match     lt  span gt                    else if  function      typeof p style                      return p style match                    else                    return match                                                                                            return   function    typeof rules defKey    rules defKey match      lt span style     rules defKey      gt     match     lt  span gt                          else               return   function    typeof rules def    rules def match      lt span style     rules def      gt     match     lt  span gt                    else           for i 0 i lt rules types length i              p   rules types i            if  p regex test match                    if  string      typeof p style                      return   lt span style     p style      gt     match     lt  span gt                    else if  function      typeof p style                      return p style match                    else                    return match                                                                                          if true     pre str     lt pre gt     str     lt  pre gt      if true     code str     lt code gt     str     lt  code gt      return str

User · Answer

If you re looking for a nice library to prettify json on a web page     Prism js is pretty good   http   prismjs com   I found using JSON stringify obj  undefined  2  to get the indentation  and then using prism to add a theme was a good approach   If you re loading in JSON via an ajax call  then you can run one of Prism s utility methods to prettify  For example   Prism highlightAll

User · Answer

The simplest way to display an object for debugging purposes   console log  data  data     lets you unfold the object manually   If you want to display the object in the DOM  you should consider that it could contain strings that would be interpreted as HTML   Therefore  you need to do some escaping     var s   JSON stringify data null 2     format var e   new Option s  innerHTML    escape document body insertAdjacentHTML  beforeend    lt pre gt   e   lt  pre gt       display

User · Answer

To highlight and beautify it in HTML using Bootstrap   function prettifyJson json  prettify        if  typeof json      string             if  prettify                json   JSON stringify json  undefined  4             else               json   JSON stringify json                       return json replace       u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g          function match                let cls     lt span gt                if       test match                     if       test match                         cls     lt span class  text-danger  gt                      else                       cls     lt span gt                                    else if   true false  test match                     cls     lt span class  text-primary  gt                  else if   null  test match                     cls     lt span class  text-info  gt                              return cls   match     lt  span gt

User · Answer

Based on Pumbaa80 s answer I have modified the code to use the console log colours  working on Chrome for sure  and not HTML  Output can be seen inside console  You can edit the  variables inside the function adding some more styling   function JSONstringify json        if  typeof json     string             json   JSON stringify json  undefined    t               var          arr                string    color green            number    color darkorange            boolean    color blue            null    color magenta            key    color red        json   json replace       u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g  function  match            var style    number          if       test match                 if       test match                     style    key                else                   style    string                          else if   true false  test match                 style    boolean            else if   null  test match                 style    null                    arr push style           arr push              return   c    match     c                arr unshift json        console log apply console  arr       Here is a bookmarklet you can use   javascript function JSONstringify json   if  typeof json     string    json   JSON stringify json  undefined    t    var arr       string    color green   number    color darkorange   boolean    color blue   null    color magenta   key    color red  json   json replace       u a-zA-Z0-9  4      u             s      b true false null  b -  d       d       eE    -   d     g  function  match   var style    number if       test match    if       test match    style    key   else  style    string    else if   true false  test match    style    boolean   else if   null  test match    style    null  arr push style  arr push     return   c    match     c     arr unshift json  console log apply console  arr    void 0     Usage   var obj    a 1   b   foo   c  false null   d  e 1 3e5      JSONstringify obj     Edit  I just tried to escape the   symbol with this line  after the variables declaration   json   json replace    g           But I find out that Chrome is not supporting   escaping in the console  Strange    Maybe this will work in the future   Cheers

User · Answer

Here is a simple JSON format color component written in React   const HighlightedJSON      json    Object    gt      const highlightedJSON   jsonObj   gt      Object keys jsonObj  map key   gt          const value   jsonObj key         let valueType   typeof value        const isSimpleValue             string    number    boolean   includes valueType      value        if  isSimpleValue  amp  amp  valueType      object             valueType    null                 return            lt div key  key  className  line  gt             lt span className  key  gt  key   lt  span gt             isSimpleValue                  lt span className  valueType  gt     value    lt  span gt                              highlightedJSON value                        lt  div gt                     return  lt div className  json  gt  highlightedJSON json   lt  div gt        See it working in this CodePen  https   codepen io benshope pen BxVpjo  Hope that helps

User · Answer

It works well    console table     Read more here  https   developer mozilla org pt-BR docs Web API Console table

User · Answer

Couldn t find any solution that had good syntax highlighting for the console  so here s my 2p  Install  amp  Add cli-highlight dependency  npm install cli-highlight --save   Define logjson globally  const highlight   require  cli-highlight   highlight console logjson    obj    gt  console log                                 highlight  JSON stringify obj  null  4                                                language   json   ignoreIllegals  true         Use  console logjson  foo   bar   someArray    string1    string2

[javascript] pretty-print JSON using JavaScript

Examples related to javascript

Examples related to json

Examples related to pretty-print