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

json 格式化

目录

1. JSON.stringify()方法

2. json-viewer插件

3. ACE 编辑器

1. JSON.stringify()方法

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

<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">

然后引入JS： 

<!-- 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>

JS代码：

<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组件：

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

实现效果：

获取输入值的参考：

    $(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

U盘提示无法打开需要进行格式化怎么解决?

在U盘的使用过程中最尴尬的情况就是遇到“无法打开，需要进行格式化”的提示。此时，我们如何才能在不破坏内部数据的情况

channel_v3.json免费下载

channel_v3.json免费下载

解析温州台风网json数据

# -*- coding: UTF-8 -*- _author_ = ‘zy’ _date_ = ‘2018/12/10 0010 22:56’ import requests,pymongo,json,time def get_typho

java JsonArray中添加json数据

java操作JsonArray或者JsonObject必须导入相关jar包   import net.sf.json.JSONArray; import net.sf.json.JSONObject; pub

JAVA核心知识点–使用org.json.JSONObject处理Json数

目录 引入org.json依赖 构建JSONObject 直接构建 使用Map构建 使用JavaBean构建 解析JSONObject 引入org.json依赖 在 maven 项

文章回顾

大家看了本文几种JSON数据在页面上格式化展示的方案的精彩教程资源内容，是不是对几种JSON数据在页面上格式化展示的方案了解更多，真心希望几种JSON数据在页面上格式化展示的方案能帮助到你， 小编会一直给你带来更多教程资源文章信息。