WEB浏览器页面上可视化展示JSON数据的方法

0 、引言

最近需要做一个接口管理的功能，需要在前端页面展示从接口获取到的json数据，我上网查了一些资料，发现有 jquery的一个插件可以使用:jQuery.json-viewer 。页面展示的效果很好，但是需要安装npm包来实现。那么有没有不用安装npm包又能实现同样功能的方法呢？我继续搜索，终于发现了一个非常简单的方法：

1、实现方法（不用JSON-Viewer）

方法其实很简单，直接上代码：

html代码如下：

<pre><code id="json"></code></pre>

js代码如下：

let btn = document.querySelector('#json');
let data = {name:'tim', age: 23, grade: 3};
btn.textContent = JSON.stringify(data, null, ' ');

效果如下：

{name:"time",age:23,grade:3
}

是不是很简单呢。

2、使用JSON-Viewer格式化json数据

1.json格式化后的效果

2.使用步骤

导入js和css样式（注意jquery的js要在viewer.js的前面引入）

3、前端代码展示

WEB浏览器页面上可视化展示JSON数据的方法相关推荐

浏览器禁止跨域请求json数据解决方法--jsonp
浏览器禁止跨域请求json数据解决方法--jsonp 参考文章: (1)浏览器禁止跨域请求json数据解决方法--jsonp (2)https://www.cnblogs.com/uyisi/p/56 ...
php窗口滚动代码_PHP自动在页面上滚动展示图片的方法
这篇文章主要介绍了PHP实现自动对图片进行滚动显示的方法,涉及php操作图片特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了PHP实现自动对图片进行滚动显示的方法.具体如下: 指 ...
Web 开发人员必备的随机 JSON 数据生成工具
在 Web 开发中,经常会需要一些测试数据来测试接口或者功能时候正确.JSON Generator 就是这样一款生成随机 JSON 数据的在线工具,Web 开发人员必备,记得收藏和分享啊. 您可能感兴 ...
html实现读取读卡器,如何在web浏览器页面使用IC卡读卡器并且兼容所有浏览器
随着H5技术的不断发展与推广,H5技术被广泛用于移动设备,PC终端等众多领域.同时,越来越多的应用都基于B/S(浏览器/服务器)模式,降低开发难度的同时还能更好的普及和应用,突破了硬件设备的兼容性问题 ...
html页面加载json数据,在html中显示JSON数据的方法
背景: 有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目,需要将接口返回的结果直接展示),但是如果直接显示字符串,不方便查看.需要格式化一下. 解决方案: 其实JSON.str ...
ExtJS grid简单应用之展示JSON数据
Grid功能: 展示json数据,编辑行,排序,分页.分页功能要根据请求URL的参数,在服务器端返回相应JSON,此处服务端未写.(url参数,可通过firebug控制台查看) 1,首先引用 < ...
使用Jquery插件jsonview来展示json数据
项目中要展示json数据,自己写一套html来展示太麻烦,可以使用jquery的插件jsonview来解决这个问题. 首先,去jquery官网下载最新的jsonview插件,放在js目录中,下载地址: ...
html json解析插件,jQuery插件jsonview展示json数据
本文实例为大家分享了jQuery插件jsonview展示json数据的具体代码,供大家参考,具体内容如下项目中要展示json数据,自己写一套html来展示太麻烦,可以使用jquery的插件jsonv ...
ASP.NET提取多层嵌套json数据的方法
ASP.NET提取多层嵌套json数据的方法本文实例讲述了ASP.NET利用第三方类库Newtonsoft.Json提取多层嵌套json数据的方法,具体例子如下. 假设需要提取的json字符串如下: ...
python返回json数据_python和flask中返回JSON数据的方法
在python中可以使用json将数据格式化为JSON格式: 1.将字典转换成JSON数据格式: s=['张三','年龄','姓名'] t={} t['data']=s return json.dum ...

WEB浏览器页面上可视化展示JSON数据的方法

0 、引言

1、实现方法（不用JSON-Viewer）

2、使用JSON-Viewer格式化json数据

WEB浏览器页面上可视化展示JSON数据的方法相关推荐

最新文章

热门文章