html 显示接口数据格式化,科技常识:html格式化输出JSON示例(测试接口)
今天小编跟大家讲解下有关html格式化输出JSON示例(测试接口) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关html格式化输出JSON示例(测试接口) 的相关资料,希望小伙伴们看了有所帮助。
将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.stringify 函数就可以了,因为此函数还有不常用的后面2个参数。
见MDN https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 的描述。
示例代码如下:
hello
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
function syntaxHighlight(json) {
if (typeof json != 'string') {
json = JSON.stringify(json, undefined, 2);
}
json = json.replace(/&/g, '&').replace(//g, '>');
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function(match) {
var cls = 'number';
if (/^"/.test(match)) {
if (/:$/.test(match)) {
cls = 'key';
} else {
cls = 'string';
}
} else if (/true|false/.test(match)) {
cls = 'boolean';
} else if (/null/.test(match)) {
cls = 'null';
}
return '' + match + '';
});
}
var songResJson={
"service": "ALL",
"qt": 581,
"content": {
"answer": {
"song": "如果缘只到遇见",
"album": "如果缘只到遇见",
"artist": "吴奇隆 严艺丹",
"pic_url": "http://p1.music.126.net/-u3WgIXsFNCW7d8Jy7pCEA==/5921969627395387.jpg"
},
"scene": "music"
}
}
document.getElementById('result').innerHTML = syntaxHighlight(songResJson);
// $('#result').html(syntaxHighlight(songResJson));
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱蒂网。
来源:爱蒂网
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。
html 显示接口数据格式化,科技常识:html格式化输出JSON示例(测试接口)相关推荐
- html格式化整理输出JSON示例(测试)
在使用PHP的时候 想在前台输出 json格式的数据样式方便查看 PHP处理起来稍显麻烦,故此可以使用js 来进行处理 将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.string ...
- 产品 电信nb接口调用_电信物联网平台NBIoT使用Postman模拟测试接口
主要用于测试部分接口以及和官方对接时候官方要求用postman发送测试数据.欢迎一起交流,提供咨询服务. 使用postman测试关键点是 配置证书 证书从平台下载,后面有详细介绍 不校验服务端证书 这 ...
- python 跨库查询(同一实例不同数据库)和接口数据进行对比,并把结果输出到Excel中
由于工作需要写了一个小脚本 ,需要跨库查询数据和接口中的数据做对比 ,并输出到Excel中 思路: 1 最笨的办法,把跨库查询的sql 拆成两部分,先查出固定的数据(做参数的数据) 2 另外数据库和接 ...
- Postman测试接口传入List类型的参数以及数组类型参数
Postman测试接口 前言 一.接受List类型的复杂参数 1.列子一.只接受一个List类型: 1.1.列子一.接受一个List类型和Integer类型参数: 2.列子二: 1.1.列子二.接受一 ...
- 根据接口文档书写接口,并在前端调用接口返回显示出数据(加下载)
---恢复内容开始--- 1.首先来看接口文档(其中一个接口): 接口的编写: 1 /** 2 * 7.11 余额明细查询接口3 *4 *@paramtoken5 *@parampageNum6 * ...
- fiddler启用过滤规则只显示想要的接口数据
fiddler启用过滤规则只显示想要的接口数据 比如只显示192.168.11.80站点数据 点击应用规则就可以只显示192.168.11.80了 转载于:https://www.cnblogs.co ...
- 计算机cdef盘无法显示,科技常识:如何解决电脑CDEF盘都打不开出现ldq
今天小编跟大家讲解下有关科技常识:如何解决电脑CDEF盘都打不开出现该文件没有程序与之关联来执行该操作的问题,相信小伙伴们对这个话题应该也很关注吧,小编也收集到了有关科技常识:如何解决电脑CDEF盘都 ...
- 分享第三方免费API接口数据
聚合的免费API接口数据: 手机号码归属地API接口:https://www.juhe.cn/docs/api/id/11 历史上的今天API接口:https://www.juhe.cn/docs/a ...
- Scrapy爬取1——接口数据爬取准备
本文爬取网页:https://spa1.scrape.center/ 爬取流程: 1.检查页面: 检查网页源代码,查看数据是在网页HTML源代码中还是调用了接口 右键检查页面源代码,未在页面中发现任何 ...
最新文章
- iOS进阶之底层原理-cache_t
- Struts2(批量类型转换器struts2.3.4)
- 设计模式总结一波点点
- wait和notify使用例子
- android 左滑按钮,android开发类似微信列表向左滑动按钮操作
- C语言打印彩色字符——以(枚举法+字符串查找)为例展示
- Nuxt项目支持import写法的最新解决方案
- 论文总结Graph Neural Networks-A review of methods and Applications
- redis主从、哨兵、集群的区别
- python工程文件如何打包_python 项目打包
- matlab在图像处理中的应用实验,MATLAB实验Matlab在数字图像处理中的应用
- 基于matlab的不规则面积图像测量,基于matlab的不规则面积图像测量.doc
- python离线语音转文字_利用Python和API轻松实现:语音转文字,文字转语音
- 【ACWing】723. PUM
- httpd +jk_虚拟主机+ Apache httpd服务器+ Tomcat + mod_jk连接器
- C语言编程规范之匈牙利命名法
- 高光谱图像基础知识(一)
- 雅思考试流程与应试注意事项
- 易代账总显示没开启打印服务器,为什么易代账一直打不开,显示一直处于唤醒状态...
- 阿里云-笑话Api使用教程
热门文章
- amp sqlserver中 什么意思_股票术语中的做空到底是什么意思?
- python cprofile_python 中 cprofile 分析 多进程程序
- 多线程小结-----线程参数和 Invoke 机制
- React 从入门到进阶之路(二)
- 4K视频在线看,网速跟不上怎么办?
- 170308、oracle查看被锁的表和解锁
- 2015/08/24
- 【iOS开发-35】有了ARC内存管理机制,是否还须要操心内存溢出等问题?——面试必备...
- Java单例模式实现(线程安全)
- HDU-----(4858)项目管理(模拟)