您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

发现一款 JSON 可视化工具神器,太爱了

时间:2022-08-12 11:06:09  来源:  作者:例会高杂文

简 介

JSON Hero 是一个简单实用的 JSON 工具,通过简介美观的 UI 及增强的额外功能,使得阅读和理解 JSON 文档变得更容易、直观。

支持多种视图以便查看 JSON:列视图、树视图、JSON 视图等 列视图是受 macOS Finder 启发创建的一种浏览 JSON 文档的新方法

项目地址:

 

https://Github.com/jsonhero-io/jsonhero-web
安装

 

要在本地运行 JSON Hero,首先 clone 源代码,并安装相关依赖项:

git clone https://github.com/jsonhero-io/jsonhero-web.git
cd jsonhero-web
npm install

然后运行以下命令启动,打开 http://localhost:8787 即可使用:

npm start
使用

前往 https://jsonhero.io/ 并将 JSON 文件拖拽到网站上,或在提供的表单中粘贴 JSON 或 JSON url


内容预览

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

日期和时间

图片网址

网站网址

JSON URL

树状视图

这个也是用的最多的,树状图结构可以很清晰的展示,看一组图:

同时支持对JSON数据中的数据进行搜索:

重点来了!
 

 

当你完成数据编辑或者审核后,需要分享给前端,不必复制全部数据,只需要生成指定链接即可,这个很方便。

整体来讲,JSON Hero 支持多种试图查看JSON数据,同时支持VS Code 等扩展,相信对经常处理JSON的小伙伴来说,是一款很给力的工具。



Tags: 可视化   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Python 可视化:Plotly 库使用基础
当使用 Plotly 进行数据可视化时,我们可以通过以下示例展示多种绘图方法,每个示例都会有详细的注释和说明。1.创建折线图import plotly.graph_objects as go# 示例1: 创建简单...【详细内容】
2024-04-01  Search: 可视化  点击:(8)  评论:(0)  加入收藏
八个流行的 Python 可视化工具包
大家好,我是Python人工智能技术喜欢用 Python 做项目的小伙伴不免会遇到这种情况:做图表时,用哪种好看又实用的可视化工具包呢?之前文章里出现过漂亮的图表时,也总有读者在后台留...【详细内容】
2023-04-11  Search: 可视化  点击:(111)  评论:(0)  加入收藏
Golang 可视化工具之go-callvis
一 背景日常我们会看一些开源项目,或者想看自己写的代码可视化,在golang中可以利用工具实现,go-callvis是以图片的形式展示了go程序的调用关系,在看复杂项目时尤其有用。二 go-...【详细内容】
2022-08-14  Search: 可视化  点击:(484)  评论:(0)  加入收藏
发现一款 JSON 可视化工具神器,太爱了
正文 JSON Hero 这是一个简单实用的 JSON 工具,通过简洁美观的 UI 增强的额外功能,使得阅读和理解 JSON 文档变得更容易、直观。支持多种视图以便查看 JSON:列视图、树视图、JS...【详细内容】
2022-08-12  Search: 可视化  点击:(757)  评论:(0)  加入收藏
图扑 Web 可视化引擎在仿真分析领域的应用
在数字孪生和仿真研究过程中,会产生大量和三维空间相关的数值信息,比如设备外观的扫描数据、地形扫描数据、生产设备温度场/压力场、流体的速度场、流体扩散,以及各种仿真数据:...【详细内容】
2022-07-13  Search: 可视化  点击:(513)  评论:(0)  加入收藏
IDEA 安装和使用Kafka 可视化管理插件Kafkalytic
IDEA 提供的 Kafka 可视化管理插件Kafkalytic。这个插件为我们提供了下面这些功能: 支持多个Kafka集群 主题管理:创建/删除/更改分区 使用正则表达式搜索主题 发布字符串/字节...【详细内容】
2022-01-07  Search: 可视化  点击:(2900)  评论:(0)  加入收藏
Nginx 可视化:配置监控这也太容易了吧
Nginx 可视化管理,例如: 配置管理 性能监控 日志监控 其他配置1方案目前已实现前两条: 配置管理,和性能监控,日志分析监控这块还需要另找方案实现,目前方案直接套用大神开发的 ng...【详细内容】
2021-07-22  Search: 可视化  点击:(359)  评论:(0)  加入收藏
▌简易百科推荐
17 个你需要知道的 JavaScript 优化技巧
你可能一直在使用JavaScript搞开发,但很多时候你可能对它提供的最新功能并不感冒,尽管这些功能在无需编写额外代码的情况下就可以解决你的问题。作为前端开发人员,我们必须了解...【详细内容】
2024-04-03  前端新世界  微信公众号  Tags:JavaScript   点击:(5)  评论:(0)  加入收藏
你不可不知的 15 个 JavaScript 小贴士
在掌握如何编写JavaScript代码之后,那么就进阶到实践——如何真正地解决问题。我们需要更改JS代码使其更简单、更易于阅读,因为这样的程序更易于团队成员之间紧密协...【详细内容】
2024-03-21  前端新世界  微信公众号  Tags:JavaScript   点击:(27)  评论:(0)  加入收藏
又出新JS运行时了!JS运行时大盘点
Node.js是基于Google V8引擎的JavaScript运行时,以非阻塞I/O和事件驱动架构为特色,实现全栈开发。它跨平台且拥有丰富的生态系统,但也面临安全性、TypeScript支持和性能等挑战...【详细内容】
2024-03-21  前端充电宝  微信公众号  Tags:JS   点击:(26)  评论:(0)  加入收藏
构建一个通用灵活的JavaScript插件系统?看完你也会!
在软件开发中,插件系统为应用程序提供了巨大的灵活性和可扩展性。它们允许开发者在不修改核心代码的情况下扩展和定制应用程序的功能。本文将详细介绍如何构建一个灵活的Java...【详细内容】
2024-03-20  前端历险记  微信公众号  Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
对JavaScript代码压缩有什么好处?
对JavaScript代码进行压缩主要带来以下好处: 减小文件大小:通过移除代码中的空白符、换行符、注释,以及缩短变量名等方式,可以显著减小JavaScript文件的大小。这有助于减少网页...【详细内容】
2024-03-13  WangLiwen    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
跨端轻量JavaScript引擎的实现与探索
一、JavaScript 1.JavaScript语言JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。ECMAScript发展史: 2.JavaScript...【详细内容】
2024-03-12  京东云开发者    Tags:JavaScript   点击:(2)  评论:(0)  加入收藏
面向AI工程的五大JavaScript工具
令许多人惊讶的是,一向在Web开发领域中大放异彩的JavaScript在开发使用大语言模型(LLM)的应用程序方面同样大有价值。我们在本文中将介绍面向AI工程的五大工具,并为希望将LLM...【详细内容】
2024-02-06    51CTO  Tags:JavaScript   点击:(53)  评论:(0)  加入收藏
JS小知识,使用这6个小技巧,避免过多的使用 if 语句
最近在重构我的代码时,我注意到早期的代码使用了太多的 if 语句,达到了我以前从未见过的程度。这就是为什么我认为分享这些可以帮助我们避免使用过多 if 语句的简单技巧很重要...【详细内容】
2024-01-30  前端达人  今日头条  Tags:JS   点击:(57)  评论:(0)  加入收藏
18个JavaScript技巧:编写简洁高效的代码
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code,作者:Shefali, 略有删改。在这篇文章中,我将分享18个JavaScript技巧,以及一些你应该知道的示例...【详细内容】
2024-01-30  南城大前端  微信公众号  Tags:JavaScript   点击:(71)  评论:(0)  加入收藏
使用 JavaScript 清理我的 200GB iCloud,有了一个意外发现!
本文作者在综合成本因素之下,决定用 Java 脚本来清理一下自己的 iCloud,结果却有了一个意外发现,即在 iCloud 中上传同一个视频和删除此视频之后,iCloud 的空间并不一致,这到底是...【详细内容】
2024-01-11    CSDN  Tags:JavaScript   点击:(99)  评论:(0)  加入收藏
站内最新
站内热门
站内头条