自己DIY出来一个JSON结构化展示器
说来也巧，这个玩意，一直都想亲手写一个，因为一直用着各种网上提供的工具，觉得这个还是有些用途，毕竟，后面的实现思路和原理不是太复杂，就是对json的遍历，然后给予不同节点类型以不同的展现风格。
我这次，是出于将一个专利写清楚，自己构思了一个实现方案，且还能显示出当前的路径，具体的显示风格，依据自己的喜好，随便DIY吧。
写这个JSON展示器，其实有很多用处，不仅仅就是为了看一个json的结构化展示。
. 更重要的是可以辅助用户和json数据进行交互，能够知道用户感兴趣的json字段是什么，可以对这个字段配置相关的数据操作函数 . 获取用户选择的数据元素的路径，实现json数据格式的扁平化操作，即将一个深度结构化的数据变形为一个一位数组的形式
下面直接上代码，具体逻辑不用细说，全在代码里。
1. demo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSONviewer</title>
<script src="./jquery.min.js"></script>
<script src="./traverse.js"></script>
<link href="./traverse.css" rel="stylesheet"/>
</head>
<body>
<div id="container" style="align: left, font-family: 'DejaVu Sans Mono','Courier New',monospace;">
<h1 style="color: red">Intelligent JSON Viewer</h1>
<div id="main">
</div>
<script>
var str = traverseJson(arr)
console.log($('#main'))
$('#main').append(str)
</script>
</div>
</body>
</html>
2. traverse.js
这个js是本结构化展示器的核心内容，这里只是一个雏形，UI部分可以根据需要进行美化。
//测试用的JSON对象
var arr={
"a":'a1',
"b":'b1',
"c":{"c1":'c11',"c2":'c22'},
"d":['d1','d2'],
"e":{"e1":['e11','e12'], "e2":['e21','e22','e23']},
"f":[{"f11":'vf11',"f12":'vf12'},{"f21":'vf21',"f22":'vf22'}],
"g":[['g11','g12'],['g21','g22']],
"h":{"h1":{'h11':'h12'}, "h2":{'h21':'h22'}},
"i":{"i1":{'i11':{'i111':'vi111', 'i112':'vi112'}}, "i2":{'i21':{'i211':'vi211', 'i212':'vi212'}}}
}
/**
* 遍历一个JSON对象的所有成员，然后构建成一段html代码片段。ul、li组合嵌套，实现，li节点的key为json的key
*/
function traverseJson(jsonObj) {
var htmlStr='<ul key="rootj" class="ul_class">';
for(var obj in jsonObj){
htmlStr += '<li class="li_class" key="'+obj+'">'+'<span class="span_class">' +obj+'</span>:'
if(!(jsonObj[obj] instanceof Object) && !(jsonObj[obj] instanceof Array)){ //基本key-value类型
htmlStr += jsonObj[obj]
}else if(jsonObj[obj] instanceof Object && !(jsonObj[obj] instanceof Array)){ //嵌套json类型
var str1 = traverseJson(jsonObj[obj])
htmlStr += str1;
}else if(jsonObj[obj] instanceof Object && jsonObj[obj] instanceof Array){ //嵌套数组类型
htmlStr += '<ul class="ul_class" key="'+obj+'">'
for(var i=;i<jsonObj[obj].length;i++){
htmlStr += '<li class="li_class" key="'+i+'">'+ '<span class="span_class">'+i+'</span>:'
if(!(jsonObj[obj][i] instanceof Object) && !(jsonObj[obj][i] instanceof Array)){
htmlStr += jsonObj[obj][i]
}else {
htmlStr += traverseJson(jsonObj[obj][i])
}
htmlStr += '</li>'
}
htmlStr += '</ul>'
}
htmlStr += '</li>'
}
htmlStr += '</ul>'
return htmlStr;
}
/**
* 实现数据整形，将一个数组对象的成员元素，变形为一个json对象的成员选择逻辑风格。
* e.g: 数组内容： a,b,1,c,0,0,d
* 变形结构: a.b[1].c[0][0].d
*/
function reshape(pathArray){
var res = ''
if(pathArray.length <= ){
return res
}
for(var item in pathArray){
var el = pathArray[item]
//console.log(el)
if(!isNaN(parseInt(el))){
var ress = res.charAt(res.length-)
if(ress == '.'){
res = res.substring(,res.length-)
}
res += '[' + el + '].'
}else{
res += el + '.'
}
}
if(res.charAt(res.length-) === '.'){
res = res.substring(,res.length-)
}
return res
}
$(function(){
/*
* 点击选中json的某个属性名后，获取当前属性名与json根节点之间的路径
*/
$(".span_class").click(function (e) {
var route=[]
var parents = $(this).parents('.li_class')
for(var i=;i<parents.length;i++){
var node = parents[i]
if(node.className=='li_class'){
route.unshift(node.getAttribute('key'))
}
}
var path = reshape(route)
route=route.join('->')
var out = route + " : " + path
console.log(out)
alert(out)
})
})
3. traverse.css
.ul_class {
padding-left: 30px;
}
.li_class {
font-family: 'DejaVu Sans Mono','Courier New',monospace;
font-size: 15px;
line-height: 12px;
word-wrap: break-word;
}
.span_class:hover {
color: red;
font-size: 20px;
line-height: 18px;
cursor: pointer;
font-weight:bold;
}
下面，将上述代码运行的效果，截图分享下，一睹为快
选择了元素后并点击节点的效果：
自己DIY出来一个JSON结构化展示器的更多相关文章
- Postman Postman测试接口之JSON结构化数据提交
Postman测试接口之JSON结构化数据提交 by:授客 QQ:1033553122 本文主要是针对结构比较复杂一点的JSON协议数据的提交做个简单说明 举例: 用户下订单接口 接口方向 客户端 ...
- knitr::kable实现结构化展示数据
一般做检验,直接会summary结果,通常情况下,会看到很多很多,口区~ 如何提取有用的信息,然后结构化展示数据呢? kable函数了. 我先给出学长给我的一部分,回头整理好了再补充 culture_ ...
- 【中文分词】结构化感知器SP
结构化感知器(Structured Perceptron, SP)是由Collins [1]在EMNLP'02上提出来的,用于解决序列标注的问题:中文分词工具THULAC.LTP所采用的理论模型便是基 ...
- 一个Json结构对比的Python小工具兼谈编程求解问题
先上代码. jsondiff.py #!/usr/bin/python #_*_encoding:utf-8_*_ import argparse import json import sys rel ...
- JSON:结构化数据格式
JSON是javascript的子类,也是作为更好的互联网传输结构化数据格式逐渐取代XML,因此要理解JSON,重要的是理解它是一种数据格式,不是一种编程语言. 语法 //javascript var ...
- 08 Json结构化Datetime时间以及保留中文
错误描述: import json import datetime a = datetime.datetime.now() print(a) b = json.dumps(a) print(b) 如上 ...
- Beats: 使用 Filebeat 进行日志json结构化 - Python
文章转载自:https://elasticstack.blog.csdn.net/article/details/106688240
- 用c#写一个json的万能解析器
CommonJsonModel .cs /// <summary> /// 万能JSON解析器 /// </summary> public class CommonJsonMo ...
- Bigtable：一个分布式的结构化数据存储系统
Bigtable:一个分布式的结构化数据存储系统 摘要 Bigtable是一个管理结构化数据的分布式存储系统,它被设计用来处理海量数据:分布在数千台通用服务器上的PB级的数据.Google的很多项目将 ...
随机推荐
- deepfake-faceswap第一篇论文-2016摘要
核心目标:给定一个人的单张图片A,另一个人的单张图片B,在保持姿势,面部表情,视线方向,发型和光照不变的条件下,将A图片中的人物换成B图片中的人物.2016年,文章[1]实现了这个目标: 德国的蒂宾根 ...
- python实现批量压缩文件夹
前段时间碰到一个需要把目录下文件夹压缩的项目,但是度娘里没找到,只好自己写脚本了. #coding:utf-8 import os filePath = raw_input("请输入路径:& ...
- PyQt5 -pycharm 环境搭建
1.安装PyQt5 在CMD窗口执行命令: pip3 install PyQt5 安装 pyqt_toools pip3 install PyQt5-tools 2.配置PyCharm 1)打开PyC ...
- linux之正则
grep命令: -V 打印grep的版本号 -E 解释PATTERN作为扩展正则表达式,也就相当于使用egrep. -F 解释PATTERN作为固定字符串的列表,由换行符 ...
- [c++]大数运算---利用C++ string实现任意长度正小数、整数之间的加减法
本文为大大维原创,最早于博客园发表,转载请注明出处!!! 一.概述 C/C++中的int类型能表示的范围是-2E31-2E31–1.unsigned类型能表示的范围是0-2E32–1,即 0-4294 ...
- https://www.cnblogs.com/soundcode/p/4174410.html
https://www.cnblogs.com/soundcode/p/4174410.html 1.首先要在服务器端新建一个网站axpx页 然后再网站的后台写代码获取winform传过来的文件名. ...
- Java编程思想 - 第11章 持有对象
· 大量笔记存放在Github Java文件中,请移步查看:https://github.com/iGuure/AndroidCodeHub/tree/master/Java%20pratice/Th ...
- Application对象及常用方法
Application对象: 服务器启动后,就产生了这个application对象.当一个客户访问服务器上的一个JSP页面时,JSP引擎为该客户分配这个 application对象,当客户在所访问的网 ...
- commons-dbcp2 新版本2.6使用连接池在关闭服务器的时候会有内存溢出的BUG....
这是异常信息.本人使用的mysql8.0数据库驱动版本mysql-connector-java Version 8.0.11,发生这种情况的原因主要是Dbcp2的XBasicDataSource在关闭 ...
- Java学习笔记(3)
1.Math类提供三类方法 三角函数 sin(radians) 返回弧度的正弦值 cos(radians) 返回弧度的余弦值 tan(radians) 返回弧度的正切值(余切求倒数即可) ...