JSON格式化 JSON美化 输出到html
{"promotion_details":{"promotion_detail":[{"discount_fee":"22.20","id":1308028810791231,"promotion_desc":"促销价:省22.20元","promotion_id":"Tmall$tmallItemPromotion_WIRELESS-62575129_546359362","promotion_name":"促销价"}]},"trade_from":"WAP,WAP"}
将上面json格式化在html输出
{
"promotion_details":{
"promotion_detail":[
{
"discount_fee":"22.20",
"id":1308028810791231,
"promotion_desc":"促销价:省22.20元",
"promotion_id":"Tmall$tmallItemPromotion_WIRELESS-62575129_546359362",
"promotion_name":"促销价"
}
]
},
"trade_from":"WAP,WAP"
}
项目中需要再html页面显示json串,于是找了些方法;
原文参见:
第一种函数:http://www.huqiwen.com/2013/01/07/share-format-json-code/
第二种函数:http://www.sharejs.com/codes/javascript/5452
方法1效果较好,以上面json为例,第二个函数会将"trade_from":"WAP,WAP" 从 逗号 处隔开.有一点问题
方法1正常
方法1:
/**
* json美化
* jsonFormat2(json)这样为格式化代码。
* jsonFormat2(json,true)为开启压缩模式
* @param txt
* @param compress
* @returns {string}
*/
function jsonFormat(txt,compress){
var indentChar = ' ';
if(/^\s*$/.test(txt)){
alert('数据为空,无法格式化! ');
return;
}
try{var data=eval('('+txt+')');}
catch(e){
alert('数据源语法错误,格式化失败! 错误信息: '+e.description,'err');
return;
};
var draw=[],last=false,This=this,line=compress?'':'\n',nodeCount=0,maxDepth=0; var notify=function(name,value,isLast,indent/*缩进*/,formObj){
nodeCount++;/*节点计数*/
for (var i=0,tab='';i<indent;i++ )tab+=indentChar;/* 缩进HTML */
tab=compress?'':tab;/*压缩模式忽略缩进*/
maxDepth=++indent;/*缩进递增并记录*/
if(value&&value.constructor==Array){/*处理数组*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'['+line);/*缩进'[' 然后换行*/
for (var i=0;i<value.length;i++)
notify(i,value[i],i==value.length-1,indent,false);
draw.push(tab+']'+(isLast?line:(','+line)));/*缩进']'换行,若非尾元素则添加逗号*/
}else if(value&&typeof value=='object'){/*处理对象*/
draw.push(tab+(formObj?('"'+name+'":'):'')+'{'+line);/*缩进'{' 然后换行*/
var len=0,i=0;
for(var key in value)len++;
for(var key in value)notify(key,value[key],++i==len,indent,true);
draw.push(tab+'}'+(isLast?line:(','+line)));/*缩进'}'换行,若非尾元素则添加逗号*/
}else{
if(typeof value=='string')value='"'+value+'"';
draw.push(tab+(formObj?('"'+name+'":'):'')+value+(isLast?'':',')+line);
};
};
var isLast=true,indent=0;
notify('',data,isLast,indent,false);
return draw.join('');
}
方法2:
/**
* json格式化便于美观在html页面输出
* @param json
* @param options
* @returns {string}
*/
function jsonFormat(json, options) { var reg = null,
formatted = '',
pad = 0,
PADDING = ' '; // one can also use '\t' or a different number of spaces // optional settings
options = options || {};
// remove newline where '{' or '[' follows ':'
options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
// use a space after a colon
options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true; // begin formatting...
if (typeof json !== 'string') {
// make sure we start with the JSON as a string
json = JSON.stringify(json);
} else {
// is already a string, so parse and re-stringify in order to remove extra whitespace
json = JSON.parse(json);
json = JSON.stringify(json);
} // add newline before and after curly braces
reg = /([\{\}])/g;
json = json.replace(reg, '\r\n$1\r\n'); // add newline before and after square brackets
reg = /([\[\]])/g;
json = json.replace(reg, '\r\n$1\r\n'); // add newline after comma
reg = /(\,)/g;
json = json.replace(reg, '$1\r\n'); // remove multiple newlines
reg = /(\r\n\r\n)/g;
json = json.replace(reg, '\r\n'); // remove newlines before commas
reg = /\r\n\,/g;
json = json.replace(reg, ','); // optional formatting...
if (!options.newlineAfterColonIfBeforeBraceOrBracket) {
reg = /\:\r\n\{/g;
json = json.replace(reg, ':{');
reg = /\:\r\n\[/g;
json = json.replace(reg, ':[');
}
if (options.spaceAfterColon) {
reg = /\:/g;
json = json.replace(reg, ': ');
} $.each(json.split('\r\n'), function(index, node) {
var i = 0,
indent = 0,
padding = ''; if (node.match(/\{$/) || node.match(/\[$/)) {
indent = 1;
} else if (node.match(/\}/) || node.match(/\]/)) {
if (pad !== 0) {
pad -= 1;
}
} else {
indent = 0;
} for (i = 0; i < pad; i++) {
padding += PADDING;
} formatted += padding + node + '\r\n';
pad += indent;
}); return formatted;
}
注意,调用函数返回结果后,加上<pre></pre>实现格式化输出
JSON格式化 JSON美化 输出到html的更多相关文章
- yformater - chrome谷歌浏览器json格式化json高亮json解析插件
yformater是一款chrome浏览器插件,用来格式化(高亮)服务端接口返回的json数据. 实际上小菜并不是第一个写这种插件的,但是现有的chrome json格式化插件实在是不太好用,索性小菜 ...
- python 格式化 json输出
利用python格式化json 字符串输出. $ echo '{"json":"obj"}' | python -m json.tool 利用python -m ...
- Python进行JSON格式化输出,以及汉字显示问题
格式化输出 转载地址 https://blog.csdn.net/real_tino/article/details/76422634 问题分析: Python下json手法的json在打印查看时, ...
- python 使用json.dumps() 的indent 参数,获得漂亮的格式化字符串后输出
想获得漂亮的格式化字符串后输出,可以使用json.dumps() 的indent 参数.它会使得输出和pprint() 函数效果类似 >>> data {'age': 4, 'nam ...
- 使用jackson美化输出json/xml
转载:http://www.cnblogs.com/xiwang/ 如何使用jackson美化输出json/xml 1.美化POJO序列化xml 下面将POJO列化为xml并打印. Person pe ...
- 如何使用jackson美化输出json/xml
如何使用jackson美化输出json/xml 1.美化POJO序列化xml 下面将POJO列化为xml并打印. Person person = new Person(); //设置person属性 ...
- HTML-DEV-ToolLink(常用的在线字符串编解码、代码压缩、美化、JSON格式化、正则表达式、时间转换工具、二维码生成与解码等工具,支持在线搜索和Chrome插件。)
HTML-DEV-ToolLink:https://github.com/easonjim/HTML-DEV-ToolLink 常用的在线字符串编解码.代码压缩.美化.JSON格式化.正则表达式.时间 ...
- json 格式化输出
C#格式化JSON字符串 很多时候我们需要将json字符串以 { "status": 1, "sum": 9 }这种方式显示,而从服务端取回来的 ...
- JSON对象格式美化
JSON.stringify(obh, null, "\t"); 这段代码就可以对某个js对象美化输出
随机推荐
- PHP 扩展库
表 6.1. PHP 扩展库 扩展库 说明 注解 php_bz2.dll bzip2 压缩函数库 无 php_calendar.dll 历法转换函数库 自 PHP 4.0.3 起内置 php_cpdf ...
- The Brain vs Deep Learning Part I: Computational Complexity — Or Why the Singularity Is Nowhere Near
The Brain vs Deep Learning Part I: Computational Complexity — Or Why the Singularity Is Nowhere Near ...
- c# 简单文件流读写CSV文件
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.R ...
- 了解Javascript 变量
javascript语言变量的作用域可以分为局部变量和全局变量 函数内部定义的变量为局部变量,作用范围在整个函数体内,函数外定义的变量为全局变量,如果在函数内部定义变量时没有使用关键字var,那么该变 ...
- Sqli-labs less 36
Less-36 我们直接看到36关的源代码 上面的check_quotes()函数是利用了mysql_real_escape_string()函数进行的过滤. mysql_real_escape_st ...
- MySQL 5.6 和 MariaDB-10.0 的性能比较测试
MySQL 5.6 和 MariaDB-10.0 的性能比较测试 时间 2013-02-14 10:11:34 开源中国 原文 http://www.oschina.net/question/12 ...
- photoshop基础
在Photoshop中,对图像的某个部分进行色彩调整,就必须有一个指定的过程.这个指定的过程称为选取.选取后形成选区. 现在先明确两个概念: 选区是封闭的区域,可以是任何形状,但一定是封闭的.不存在开 ...
- Java日志记录的事儿
一.java日志组件 1.common-logging common-logging是apache提供的一个通用的日志接口.用户可以自由选择第三方的日志组件作为具体实现,像log4j,或者jdk自带的 ...
- Codeforces449A Jzzhu and Chocolate && 449B Jzzhu and Cities
CF挂0了,简直碉堡了.两道题都是正确的思路但是写残了.写个解题报告记录一下心路历程. A题问的是 一个n*m的方块的矩形上切k刀,最小的那一块最大可以是多少.不难发现如果纵向切k1刀,横向切k2刀, ...
- POJ 2566
Bound Found Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 1445 Accepted: 487 Spec ...