一个开源的JSON浏览器,可快速浏览、搜索和导航JSON文件

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的JSON文件浏览器——JSON Hero。

JSON Hero 由 API Hero 团队创建和维护。API Hero 可以轻松地集成到项目中,无需任何扩展。支持列视图、树视图、编辑器视图等多种预览方式,预览文件支持图片、视频、样式、网站等。

  • 列视图

受 macOS Finder 的启发,Column View 是一种浏览 JSON 文档的新方法。支持键盘导航、路径栏、历史记录等功能。

另外,列视图支持 “持有” 选定的后代并在层次结构中向上移动,然后在兄弟姐妹之间移动并查看在该路径中找到的不同值。很难描述,但这里有一个动画可以帮助演示:

如图所示,在移动到父级时按住Option(或 Alt )可保持文档的一部分处于选中状态,并在其周围的 JSON 上下文中显示它。然后可以在数组中的项目之间遍历并比较跨深层层次结构的选择值。

  • 编辑器视图

在编辑器中查看整个 JSON 文档,但保留在文档中移动时从侧边栏获得的实时预览和相关值:

  • 树视图

使用传统的树视图遍历JSON 文档,具有可折叠的部分和键盘快捷键。同时保持实时的预览效果:

  • 搜索

快速打开搜索面板并在几毫秒内模糊搜索整个 JSON 文件。支持搜索:键名、键路径、值。

  • 内容预览

JSON Hero 自动推断字符串的内容并提供有用的预览和您选择的值的属性。

日期和时间:

图片网址:

网站网址:

推文网址:

JSON 网址:

颜色:

  • 相关值

轻松查看整个 JSON 文档中特定字段的所有相关值,包括任何 undefined 或 null 值。

克隆 repo 并安装依赖项:

然后,在名为 repo 的根目录下创建一个文件 .env 并设置SESSION_SECRET值:

构建:

运行:

访问:http://localhost:8787

-END-

开源协议:Apache2.0

开源地址:https://github.com/apihero-run/jsonhero-web

10分钟让你明白JSON是什么

嗨,哥们儿传JSON数据啊,你传的什么鬼?不懂JSON吗?别说你没听过JSON数据哈。今天你被心灵深处的一个闹铃闹醒,心想:这该死的JSON究竟是个什么东西?为什么突然间到处都是它了!

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

JSON的实际内核就是字符串,而且JSON在每一种开发语言都有自己的解析和开发机制。

1、 轻量级

2、 易于阅读

3、 占用服务资源少

4、 支持各种语言

JSON数据格式:主要由对象 { } 和数组 [ ] 组成:

1、 JSON 对象语法

var myObj = { \”name\”:\”yy\”, \”age\”:28, \”like\”:null }

访问对象值:

使用点号(.)来访问对象的值myObj.name

使用中括号([])来访问对象的值myObj[\”name\”];

2、嵌套 JSON 对象

var myObj = {

\”name\”:\” yy \”,

\” age \”:28,

\” likes\”: {

\”like1\”:\”kanshu\”,

\”like2\”:\”xiezi\”,

\”like3\”:\”zhibo\”

}

}

使用点号(.)或者中括号([])来访问嵌套的 JSON 对象myObj. likes.like1; 或 myObj. likes [\”like1\”];

3、数组作为 JSON 对象

var myArr = [ \”yy\”, \”zdk\”, \”28\” ]

访问数组值:使用中括号([])来访问数组的值myArr [0];

4、JSON 对象中的数组

var myArr = {

\”name\”:\”zdk\”,

\”age\”:28,

\”likes\”:[

\”kanshu\”,

\”lanqiu\”,

\”Taobao\”

]

}

使用索引值来访问数组:myArr. likes[0];

注意:JSON 中数组值必须是合法的 JSON 数据类型(字符串, 数字, 对象, 数组, 布尔值或 null)。

1.前台对象数据:

var params = {

\”userName\”:userName,

\”userPwd\”:userPwd

};

//对象直接传默认序列化

1.1 后端对象接收:

BufferedReader bufferedReader = request.getReader();

String json = bufferedReader.readLine();

Users users = JSON.parseObject(json,Users.class);

//将前端发过来的json字符串转

2.前台数组数据:

var params = [userName,userPwd];

//转成JSON字符串 JSON.stringify(params)

2.1 后端数组接收:

BufferedReader bufferedReader = request.getReader();

String json = bufferedReader.readLine();

JSONArray array = JSON.parseArray(json);

System.out.println(array.get(1));

//如果多条数组还可以:

List<Users> userList = JSON.parseArray(json, Users.class);

3.后端数据封装:

response.setContentType(\”application/json;charset=utf8\”);

response.getWriter().write(\”{\\\”userName\\\”:\\\”zhangsan\\\”,\\\”userPwd\\\”:123}\”);

response.getWriter().write(JSON.toJSONString(user));

response.getWriter().write(JSON.toJSONString(list中放实体对象));

response.getWriter().write(JSON.toJSONString(list中放实体对象(还可以嵌套)));

3.1 前台接收后台数据:

console.log(JSON.parse(responseResult)); //json转对象前提是dataType不写json

console.log(JSON.stringify(responseResult)); //json转对字符串

$.each(responseResult.list,function (index,item) {

console.log(item.userName);

console.log(item.userPwd);

})

结尾:如上属于Gson和FastJson都是最常用的方法,本文章里面用到的API也是最常用的API,基本开发都够用了,其余未涉及到的请自行查看源码学习吧。如果觉得丫丫分享的还不错,请点击关注。谢谢!

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场,未经允许不得转载。