Pretty Json object in html

Question

How do I pretty print JSON object in html? I tried this solution but not working. Please help me what I need to do to achieve this. I tried using json pipe:

<div class="box box-default">                     
    <pre>{{placeDetail |json}}</pre>                  
</div>

Answer 1

You can try with |json

<div class="box box-default">
    <code>
        <pre>{{placeDetail |json}}</pre>
    </code>
</div>

Answer 2

For native JS: : <script>document.write(JSON.stringfiy(placeDetail )</script> For angular you need to add the <code> tag

Angular:

<code>
    <pre>{{placeDetail |json}}</pre>
</code>

Native JS:

<div class="box box-default">
    <pre><script>document.write(JSON.stringify(placeDetail))</script></pre>
</div>

Answer 3

Angular2 solution:

https://plnkr.co/edit/msa5JDjPUxGMFcHptTu8?p=preview

javascript solution:

var placeDetail = {
    'a': {
        'b': 1,
        'c': 2
    },
    'd': 3
}; 
document.getElementById("json-result").innerHTML = JSON.stringify(placeDetail, undefined, 2);

<pre id="json-result">
</pre>