html中的漂亮Json对象

Posted 2023-03-05

【中文标题】html中的漂亮Json对象

【英文标题】：Pretty Json object in html

【发布时间】：2017-12-28 10:09:29

【问题描述】：

如何在 html 中漂亮地打印 JSON 对象？我试过这个solution 但没有用。请帮助我实现这一目标。我尝试使用json 管道：

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

【问题讨论】：

看起来像车把模板

***.com/questions/4810841/…

【参考方案1】：

试试这个：

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

【参考方案2】：

对于原生 JS: : <script>document.write(JSON.stringfiy(placeDetail )</script> 对于角度，您需要添加 <code> 标签

角度：

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

原生 JS：

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

【讨论】：

相应地更新了答案

【参考方案3】：

Angular2 解决方案：

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

javascript解决方案：

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

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

【讨论】：

@ShaileshLadumor 我在答案中添加了 plunker 链接检查它

javascript 解决方案应使用textContent 而不是innerHTML 以防止XSS 攻击。