几种JSON数据在页面上格式化展示的方案

阅读目录

1. JSON.stringify()方法
2. json-viewer插件
3. ACE 编辑器

1. JSON.stringify()方法

如下示例，original是一个 textarea，会在输入框失去焦点的时候格式化JSON数据

html

<textarea class="form-control" id="original" rows="20" placeholder="Please input JSON data here ..." style="white-space:nowrap; overflow:scroll;"></textarea>

        <!--失去焦点的时候格式化 JSON 数据-->
        $('#original').blur(function() {
            var input;
            try {
                if ($('#original').val().length == 0) {
                        return;
                }
 
                input = eval('(' + $('#original').val() + ')');
            } catch (error) {
                return alert("Input data is not valid JSON, please check. Error: " + error);
            }
 
            $('#original').val(JSON.stringify(input, null, 4));
        });

回到顶部

2. json-viewer插件

所要的CSS和JS文件下载地址：

https://github.com/abodelot/jquery.json-viewer/tree/master/json-viewer

首先引入CSS：

<!-- JSON Viewer -->
<link href="/static/css/campaign/jquery.json-viewer.css" rel="stylesheet">

 <script src="../static/components/jquery/dist/jquery.min.js"></script>
<!-- JSON viewer -->
<script src="/static/js/campaign/jquery.json-viewer.js"></script>

如下方法可以将JSON数据进行格式化：
        $('#btn-json-viewer').click(function() {
            try {
                var input = eval('(' + $('#original').val() + ')');
            } catch (error) {
                return alert("Cannot eval JSON: " + error);
            }
 
            $('#original').hide();
            $('#json-renderer').show();
 
            $('#btn-json-viewer').hide();
            $('#btn-json-viewer1').show();
 
            $('#json-renderer').jsonViewer(input, {collapsed: false, withQuotes: true});
        });

回到顶部

3. ACE 编辑器

下载并引入ace.js：https://github.com/ajaxorg/ace/tree/master/lib/ace

<script type="text/javascript" src="/static/js/campaign/ace/ace.js"></script>

<script>
    $(document).ready(function () {
    });
 
    var editor = ace.edit("editor");
    editor.setOptions({
        mode: 'ace/mode/json',
        theme: 'ace/theme/twilight',
        tabSize: 2,
        wrap: true,
    })
    
    <!-- 这里获取JSON数据，并将其放入Editor中 -->
    editor.setValue(JSON.stringify(data, null, '\t'));
 
</script>

html

                    <div class="ibox-content" style="height: 700px">
                        <style type="text/css" media="screen">
                            #editor {
                                height: 650px;
                            }
                        </style>
                        <div id="editor"></div>
                    </div>

获取输入值的参考：

    $(function() {
        <!--点击校验-->
        $('#btn-validate').click(function() {
            var jsonDataEle = ace.edit("jsonData");
            var jsonSchemaEle = ace.edit("jsonSchema");
 
            var jsonData = jsonDataEle.session.getValue();
            var jsonSchema = jsonSchemaEle.session.getValue();
        });
    });