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

 

目录

 

1. JSON.stringify()方法

2. json-viewer插件

3. ACE 编辑器

---

1. JSON.stringify()方法

如下示例，original是一个 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：

然后引入JS： 

如下方法可以将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

JS代码：

HTML组件：

实现效果：

 

获取输入值的参考：

    $(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();
        });
    });

 

更多关于ACE的使用：

https://ace.c9.io/#nav=howto