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

IT教程 4年前 (2020) https://www.55wd.com

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

效果如下:

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

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>

实现效果:

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

获取输入值的参考:

    $(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盘的使用过程中最尴尬的情况就是遇到&ldquo;无法打开,需要进行格式化&rdquo;的提示。此时,我们如何才能在不破坏内部数据的情况

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数据在页面上格式化展示的方案能帮助到你, 小编会一直给你带来更多教程资源文章信息。

版权声明: 发表于 2020-08-20 8:50:35。

本文由第三方用户分享仅代表作者观点,不代表本网站立场,秉承互联网开放分享的精神,目的在于传递更多信息,加强各行业互通交流,但对内容不作任何保证或承诺,请读者自行参考斟酌。网站发布的信息(包含但不限于版式、图片、字体、文章等素材)由第三方用户分享,版权归原作者所有,本站不承担任何相关的版权纠纷等相关责任。如您认为本篇内容侵犯了您的权益,请与我们联系,我们会及时处理。

豌豆资源网专注分享全网综合资源网站大全,致力于超实用的内容资源搜索。

转载请注明:
本文标题:几种JSON数据在页面上格式化展示的方案
本文地址:https://55wd.com/s134092/