JSON stringify output to div in pretty print way

Question

I JSON stringify a json object by   result   JSON stringify message  my json  2    The 2 in the argument above is supposed to pretty print the result   It does this if i do something like alert result    However  I want to output this to the user by appending it inside a div   When I do this I get just a single line showing up    I don t think it is working because the breaks and spaces are not being interpreted as html       data      x    1    y    1    url    http   url com      event    start    show   1   id   50     Is there a way to output the result of JSON stringify to a div in a pretty print way

User · Answer

print the state of a component with JSX

render() {
  return (
    <div>
      <h1>Adopt Me!</h1>
      <pre>
        <code>{JSON.stringify(this.state, null, 4)}</code>
      </pre>
    </div>
  );
}

stringify

User · Answer

Make sure the JSON output is in a  lt pre gt  tag

User · Answer

If your  lt pre gt  tag is showing a single-line of JSON because that s how the string is provided already  via an api or some function page out of your control   you can reformat it like this   HTML    lt pre id  json  gt   some   JSON string   lt  pre gt    JavaScript        function             var element   document getElementById  json            var obj   JSON parse element innerText           element innerHTML   JSON stringify obj  undefined  2               or jQuery         formatJson        function formatJson             var element       json            var obj   JSON parse element text             element html JSON stringify obj  undefined  2

User · Answer

Consider your REST API returns      Intent    Command   search   SubIntent  null     Then you can do the following to print it in a nice format    lt pre id  ciResponseText  gt Output will de displayed here  lt  pre gt      var ciResponseText   document getElementById  ciResponseText    var obj   JSON parse http response   ciResponseText innerHTML   JSON stringify obj  undefined  2

User · Answer

use style white-space  pre the  lt pre gt  tag also modifies the text format which may be undesirable

User · Answer

My proposal is based on    replace each   n   newline  with a  lt br  replace each space with  amp nbsp     x000D   x000D  var x      data      x    1    y    1    url    http   url com      event    start    show   1   id   50    x000D   x000D   x000D  document querySelector   newquote   innerHTML   JSON stringify x  null  6  x000D        replace   n     g  function  match  p1    x000D           return   lt br gt       amp nbsp   repeat p1 length   x000D           x000D   lt div id  newquote  gt  lt  div gt  x000D   x000D   x000D

User · Answer

you can try this repository    https   github com amelki json-pretty-html

User · Answer

for those who want to show collapsible json can use renderjson  Here is the example by embedding the render js javascript in html   lt  DOCTYPE html gt   lt html gt    lt head gt       lt script type  application javascript  gt             Copyright    2013-2014 David Caldwell  lt david porkrind org gt                        Permission to use  copy  modify  and or distribute this software for any            purpose with or without fee is hereby granted  provided that the above            copyright notice and this permission notice appear in all copies                        THE SOFTWARE IS PROVIDED  AS IS  AND THE AUTHOR DISCLAIMS ALL WARRANTIES            WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF            MERCHANTABILITY AND FITNESS  IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY            SPECIAL  DIRECT  INDIRECT  OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES            WHATSOEVER RESULTING FROM LOSS OF USE  DATA OR PROFITS  WHETHER IN AN ACTION            OF CONTRACT  NEGLIGENCE OR OTHER TORTIOUS ACTION  ARISING OUT OF OR IN            CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE              Usage            -----            The module exports one entry point  the  renderjson    function  It takes in            the JSON you want to render as a single argument and returns an HTML            element                        Options            -------            renderjson set icons       -                This Allows you to override the disclosure icons                        renderjson set show to level level               Pass the number of levels to expand when rendering  The default is 0  which              starts with everything collapsed  As a special case  if level is the string               all  then it will start with everything expanded                        renderjson set max string length length               Strings will be truncated and made expandable if they are longer than               length   As a special case  if  length  is the string  none  then              there will be no truncation  The default is  none                         renderjson set sort objects sort bool               Sort objects by key  default  false                        Theming            -------            The HTML output uses a number of classes so that you can theme it the way            you d like                  disclosure                               syntax                                                       string         includes quotes                  number                 boolean                 key            object key                  keyword         null    undefined                   object syntax                            array syntax                      var module           module        exports   renderjson    function                  var themetext   function      class  text                         var spans                       while  arguments length                      spans push append span Array prototype shift call arguments                            text Array prototype shift call arguments                      return spans                             var append   function     el                            var el   Array prototype shift call arguments                   for  var a   0  a  lt  arguments length  a                        if  arguments a  constructor    Array                          append apply this   el  concat arguments a                         else                         el appendChild arguments a                    return el                             var prepend   function  el  child                    el insertBefore child  el firstChild                   return el                            var isempty   function  obj                    for  var k in obj  if  obj hasOwnProperty k   return false                  return true                            var text   function  txt    return document createTextNode txt                 var div   function      return document createElement  div                  var span   function  classname                    var s   document createElement  span                    if  classname  s className   classname                  return s                             var A   function A txt  classname  callback                    var a   document createElement  a                    if  classname  a className   classname                  a appendChild text txt                    a href                        a onclick   function      callback    return false                     return a                              function  renderjson json  indent  dont indent  show level  max string  sort objects                    var my indent   dont indent        indent                   var disclosure   function  open  placeholder  close  type  builder                        var content                      var empty   span type                       var show   function                              if   content  append empty parentNode                              content   prepend builder                                    A renderjson hide   disclosure                                       function                                              content style display    none                                           empty style display    inline                                                                     content style display    inline                           empty style display    none                                              append empty                          A renderjson show   disclosure   show                           themetext type     syntax   open                           A placeholder  null  show                           themetext type     syntax   close                         var el   append span    text my indent slice 0  -1    empty                       if  show level  gt  0                          show                        return el                                      if  json     null  return themetext null  my indent   keyword    null                    if  json     void 0  return themetext null  my indent   keyword    undefined                     if  typeof  json      string   amp  amp  json length  gt  max string                      return disclosure      json substr 0  max string                  string   function                              return append span  string    themetext null  my indent   string   JSON stringify json                                              if  typeof  json      object      Strings  numbers and bools                     return themetext null  my indent  typeof  json   JSON stringify json                     if  json constructor    Array                        if  json length    0  return themetext null  my indent   array syntax                               return disclosure                     array   function                              var as   append span  array    themetext  array syntax        null    n                             for  var i   0  i  lt  json length  i                                append as                                   renderjson json i   indent           false  show level - 1  max string  sort objects                                   i    json length - 1   themetext  syntax                                              text   n                             append as  themetext null  indent   array syntax                                  return as                                                                object                 if  isempty json                       return themetext null  my indent   object syntax                           return disclosure                   object   function                          var os   append span  object    themetext  object syntax        null    n                         for  var k in json  var last   k                      var keys   Object keys json                       if  sort objects                          keys   keys sort                        for  var i in keys                            var k   keys i                           append os  themetext null  indent            key         k         object syntax                                       renderjson json k   indent           true  show level - 1  max string  sort objects                               k    last   themetext  syntax                                          text   n                                               append os  themetext null  indent   object syntax                              return os                                                 var renderjson   function renderjson json                    var pre   append document createElement  pre     renderjson json      false  renderjson show to level  renderjson max string length  renderjson sort objects                    pre className    renderjson                   return pre                            renderjson set icons   function  show  hide                    renderjson show   show                  renderjson hide   hide                  return renderjson                             renderjson set show to level   function  level                    renderjson show to level   typeof level     string   amp  amp                      level toLowerCase        all    Number MAX VALUE                       level                  return renderjson                             renderjson set max string length   function  length                    renderjson max string length   typeof length     string   amp  amp                      length toLowerCase        none    Number MAX VALUE                       length                  return renderjson                             renderjson set sort objects   function  sort bool                    renderjson sort objects   sort bool                  return renderjson                                Backwards compatiblity  Use set show to level   for new code              renderjson set show by default   function  show                    renderjson show to level   show   Number MAX VALUE   0                  return renderjson                             renderjson set icons                        renderjson set show by default false               renderjson set sort objects false               renderjson set max string length  none                return renderjson                     lt  script gt    lt  head gt     lt body gt       lt div id  dest  gt  lt  div gt   lt  body gt   lt script type  application javascript  gt      document getElementById  dest   appendChild          renderjson set show by default true                 set show to level 2                 set sort objects true                 set icons       -                set max string length 100                                                        glossary                              title    example glossary                            GlossDiv                                  title    S                                GlossList                                      GlossEntry                                          ID    SGML                                        SortAs    SGML                                        GlossTerm    Standard Generalized Markup Language                                        Acronym    SGML                                        Abbrev    ISO 8879 1986                                        GlossDef                                              para    A meta-markup language  used to create markup languages such as DocBook                                             GlossSeeAlso     GML    XML                                                                               GlossSee    markup                                                                                                                                                                            menu                              id    file                            value    File                            popup                                  menuitem                                        value    New    onclick    CreateNewDoc                                          value    Open    onclick    OpenDoc                                          value    Close    onclick    CloseDoc                                                                                                                                               widget                              debug    on                            window                                  title    Sample Konfabulator Widget                                name    main window                                width   500                               height   500                                                     image                                  src    Images Sun png                                name    sun1                                hOffset   250                               vOffset   250                               alignment    center                                                      text                                  data    Click Here                                size   36                               style    bold                                name    text1                                hOffset   250                               vOffset   100                               alignment    center                                onMouseUp    sun1 opacity    sun1 opacity   100    90                                                                                                              web-app                              servlet                                                                    servlet-name    cofaxCDS                                    servlet-class    org cofax cds CDSServlet                                    init-param                                          configGlossary installationAt    Philadelphia  PA                                        configGlossary adminEmail    ksm pobox com                                        configGlossary poweredBy    Cofax                                        configGlossary poweredByIcon     images cofax gif                                        configGlossary staticPath     content static                                        templateProcessorClass    org cofax WysiwygTemplate                                        templateLoaderClass    org cofax FilesTemplateLoader                                        templatePath    templates                                        templateOverridePath                                            defaultListTemplate    listTemplate htm                                        defaultFileTemplate    articleTemplate htm                                        useJSP   false                                       jspListTemplate    listTemplate jsp                                        jspFileTemplate    articleTemplate jsp                                        cachePackageTagsTrack   200                                       cachePackageTagsStore   200                                       cachePackageTagsRefresh   60                                       cacheTemplatesTrack   100                                       cacheTemplatesStore   50                                       cacheTemplatesRefresh   15                                       cachePagesTrack   200                                       cachePagesStore   100                                       cachePagesRefresh   10                                       cachePagesDirtyRead   10                                       searchEngineListTemplate    forSearchEnginesList htm                                        searchEngineFileTemplate    forSearchEngines htm                                        searchEngineRobotsDb    WEB-INF robots db                                        useDataStore   true                                       dataStoreClass    org cofax SqlDataStore                                        redirectionClass    org cofax SqlRedirection                                        dataStoreName    cofax                                        dataStoreDriver    com microsoft jdbc sqlserver SQLServerDriver                                        dataStoreUrl    jdbc microsoft sqlserver   LOCALHOST 1433 DatabaseName goon                                        dataStoreUser    sa                                        dataStorePassword    dataStoreTestQuery                                        dataStoreTestQuery    SET NOCOUNT ON select test  test                                          dataStoreLogFile     usr local tomcat logs datastore log                                        dataStoreInitConns   10                                       dataStoreMaxConns   100                                       dataStoreConnUsageLimit   100                                       dataStoreLogLevel    debug                                        maxUrlLength   500                                                                                                                                 servlet-name    cofaxEmail                                    servlet-class    org cofax cds EmailServlet                                    init-param                                          mailHost    mail1                                        mailHostOverride    mail2                                                                                                                                  servlet-name    cofaxAdmin                                    servlet-class    org cofax cds AdminServlet                                                                                                 servlet-name    fileServlet                                    servlet-class    org cofax cds FileServlet                                                                                                servlet-name    cofaxTools                                    servlet-class    org cofax cms CofaxToolsServlet                                    init-param                                          templatePath    toolstemplates                                         log   1                                       logLocation     usr local tomcat logs CofaxTools log                                        logMaxSize                                            dataLog   1                                       dataLogLocation     usr local tomcat logs dataLog log                                        dataLogMaxSize                                            removePageCache     content admin remove cache pages amp id                                         removeTemplateCache     content admin remove cache templates amp id                                         fileTransferFolder     usr local tomcat webapps content fileTransferFolder                                        lookInContext   1                                       adminGroupID   4                                       betaServer   true                                                                                            servlet-mapping                                  cofaxCDS                                     cofaxEmail     cofaxutil aemail                                  cofaxAdmin     admin                                  fileServlet     static                                  cofaxTools     tools                                                         taglib                                  taglib-uri    cofax tld                                taglib-location     WEB-INF tlds cofax tld                                                                                                             menu                              header    SVG Viewer                            items                                    id    Open                                    id    OpenNew    label    Open New                                 null                                 id    ZoomIn    label    Zoom In                                    id    ZoomOut    label    Zoom Out                                    id    OriginalView    label    Original View                                 null                                 id    Quality                                    id    Pause                                    id    Mute                                 null                                 id    Find    label    Find                                       id    FindAgain    label    Find Again                                    id    Copy                                    id    CopyAgain    label    Copy Again                                    id    CopySVG    label    Copy SVG                                    id    ViewSVG    label    View SVG                                    id    ViewSource    label    View Source                                    id    SaveAs    label    Save As                                 null                                 id    Help                                    id    About    label    About Adobe CVG Viewer                                                                                                                 empty                              object                                array                                                                                      really long    Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nulla posuere  orci quis laoreet luctus  nunc neque condimentum arcu  sed tristique sem erat non libero  Morbi et velit non justo rutrum pulvinar  Nam pellentesque laoreet lacus eget sollicitudin  Quisque maximus mattis nisl  eget tempor nisi pulvinar et  Nullam accumsan sapien sapien  non gravida turpis consectetur non  Etiam in vestibulum neque  Donec porta dui sit amet turpis efficitur laoreet  Duis eu convallis ex  vel volutpat lacus  Donec sit amet nunc a orci fermentum luctus                                       lt  script gt    lt  html gt

User · Answer

A lot of people create very strange responses to these questions that make alot more work than necessary  The easiest way to do this consists of the following  Parse JSON String using JSON parse value  Stringify Parsed string into a nice format - JSON stringify input undefined 2  Set output to the value of step 2   In actual code  an example will be  combining all steps together       var input   document getElementById  quot input quot   value      document getElementById  quot output quot   value   JSON stringify JSON parse input  undefined 2    output value is going to be the area where you will want to display a beautified JSON

User · Answer

Full disclosure I am the author of this package but another way to output JSON or JavaScript objects in a readable way complete with being able skip parts  collapse them  etc  is nodedump  https   github com ragamufin nodedump

User · Answer

If this is really for a user  better than just outputting text  you can use a library like this one https   github com padolsey prettyprint js to output it as an HTML table

User · Answer

Please use a  lt pre gt   tag   demo   http   jsfiddle net K83cK     x000D   x000D  var data     x000D     data     x000D       x    1   x000D       y    1   x000D       url    http   url com  x000D       x000D     event    start   x000D     show   1  x000D     id   50 x000D    x000D   x000D   x000D  document getElementById  json   textContent   JSON stringify data  undefined  2   x000D   lt pre id  json  gt  lt  pre gt  x000D   x000D   x000D

[javascript] JSON.stringify output to div in pretty print way

Examples related to javascript

Examples related to html

Examples related to json

Examples related to pretty-print

Examples related to stringify