如何在html页面中显示JSON数据

解决方案：

1、使用 JSON.stringify 将JSON格式化，具体的用法是：

JSON.stringify(res, null, 2); //res是要JSON化的对象，2是spacing

效果：

2、加上格式化的代码和样式

js 代码

function syntaxHighlight(json) {if (typeof json != 'string') {json = JSON.stringify(json, undefined, 2);}json = json.replace(/&/g, '&').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 '<span class="' + cls + '">' + match + '</span>';});
}

css 样式

<style>pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }.string { color: green; }.number { color: darkorange; }.boolean { color: blue; }.null { color: magenta; }.key { color: red; }</style>

html代码:

<div id="win" class="mini-window" style="width:80%;height:80%;z-index:100;padding:0;overflow-x:hidden"  showMaxButton="false" allowResize="true" showModal="false" >
<pre id="result" >
</pre>
</div>

使用：

$('#result').html(syntaxHighlight(res));

效果：

如何在html页面中显示JSON数据相关推荐

html页面加载json数据,在html中显示JSON数据的方法
背景: 有时候我们需要将json数据直接显示在页面上(比如在做一个接口测试的项目,需要将接口返回的结果直接展示),但是如果直接显示字符串,不方便查看.需要格式化一下. 解决方案: 其实JSON.str ...
azure机器学习_如何在Azure机器学习中使用JSON数据
azure机器学习 Azure Machine Learning (also known as Azure ML) is cloud-based machine learning solution o ...
odbc连接数据库（MYSQL)以及在页面中显示其中数据
首先需要建立一个数据库(我是在workbench中建立的) 大概就是这样一个简单的数据库 (学号,姓名和年龄) 首先是连接数据库,代码如下在这里一定一定要注意!!import="java ...
php json转数组后并在前端展示,0516-如何从服务器端获取JSON格式字符串并解决到前端页面中显示...
一. 如何从服务器端获取JSON格式字符串并解决到前端页面中显示 1.采用AJAX异步方式从服务器请求必须为字符串的数据:例如 $PHP= '{"aaa":"bbb&q ...
如何把python可视化到前端_python数据可视化的效果如何在web页面中展示_北京可视化股票...
有什么APP可以展示可视化的任务进度可视化任务进度软件,使用敬业签,具体可视有事项开始时间,进度及人.还有结束时间以及人员处理速等等,更多功能如下: 1.敬业签是一款功能比较全面的桌面便签软件,分为 ...
WPF：使用Json.NET在TreeView中树形显示JSON数据
原文 WPF:使用Json.NET在TreeView中树形显示JSON数据据读者可以参考这个开源的可以树形显示XML和JSON的工具: Mgen Object 603:XML/JSON树形显示小工 ...
在JSP页面中输出JSON格式数据
JSON-taglib是一套使在JSP页面中输出JSON格式数据的标签库. JSON-taglib主页: http://json-taglib.sourceforge.net/index.html J ...
jsp在mysql中删除数据_如何在jsp页面中删除数据库中的数据
如何在jsp页面中删除数据库中的数据各位大虾! 我想在jsp页面上写一个按钮功能,从而动态的删除数据库中的一行数据. 不知道怎么实现这是我写的一段代码数据库是MySql UserBean p3= ...
ssrs 数据分页_如何在SSRS中使用JSON数据
ssrs 数据分页 In this article, we will explore the concept of using JSON data in SQL Server Reporting Se ...

如何在html页面中显示JSON数据

1、使用 JSON.stringify 将JSON格式化，具体的用法是：

2、加上格式化的代码和样式

如何在html页面中显示JSON数据相关推荐

最新文章

热门文章