Render JSON into HTML

Question

I get JSON data with next code:

$.getJSON(
     "data.json",function foo(result) {
       $.each(result[1].data.children.slice(0, 10),
        function (i, post) {
          $("#content").append( '<br> HTML <br>' + post.data.body_html );       
        }
      )
    }
 )

 <div id="content"></div>

Some of strings included : < and > and this did not displaying as regular html <, > Try to use .html() instead .append() did not work.

Here is live example http://jsfiddle.net/u6yUN/

Answer 1

Just use the 3rd (space) parameter of JSON.stringify to format the json, and use <pre> tags to display.

const json = { foo: { bar: 'hello' } }


$('html').append('<pre>' + JSON.stringify(json, null, 2) + '</pre>')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>