js前端json格式化排版

背景：

想要将左边字符串实现右边的显示效果

<div class="col-lg-12">
    <textarea style="width:850px;height:500px;" class="col-lg-4 " id="textSourceJosn"></textarea>
    <textarea style="width:850px;height:500px;" class="col-lg-4 " id="textJosn"></textarea>

    <pre class="col-lg-4 " id="preJosn"></pre>
</div>

 

方法一：JSON.stringify

 $('#textJosn').html(JSON.stringify(result, null, 4));

方法二：json-viewer.js

github样式地址：https://github.com/abodelot/jquery.json-viewer/tree/master/json-viewer

将样式copy到本地项目，在前端代码中添加css、js引用：

<script src="~/Scripts/jquery.json-viewer.js"></script>

<link rel="stylesheet" href="~/Css/jquery.json-viewer.css" />

 var options = {
                        collapsed: false,
                        withQuotes: true
                    }
                    $('#preJosn').jsonViewer(result, options);
                    var arrs = [];

 

结果：

1.为json字符串原型，2.为方法一，3.为方法二