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

2024-06-02 07:46| 来源: 网络整理| 查看: 265

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代码：

$(document).ready(function () { }); var editor = ace.edit("editor"); editor.setOptions({ mode: 'ace/mode/json', theme: 'ace/theme/twilight', tabSize: 2, wrap: true, }) editor.setValue(JSON.stringify(data, null, '\t'));

HTML组件：

#editor { height: 650px; }

实现效果：

获取输入值的参考：

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

【本文地址】

公司简介

联系我们