格式化json

本文介绍了在JavaScript中如何将JSON对象格式化显示,通过遍历属性并进行缩进、换行处理,实现友好的JSON格式展示。文章提供了一段递归实现的代码,并提及了将格式化字符串转回JSON对象时去除多余换行和缩进的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们知道,在js中JSON.parse(xxx)可以将符合json规则的字符串xxx转换成js对象,反过来,可以通过JSON.stringify(xxx)将json对象转换成js字符串。

可能有这样的需求,将json对象在web界面上以友好的方式展现出来,说得直白一点,就是带缩进的格式展示,而这个需求是JSON.parse()无法实现的,我们需要自己实现这个

功能。

思路很简单:遍历json对象的各个属性,进行缩进、换行拼接字符串,如果属性也是json对象,那么就多缩进一层,显然,这是一个递归。

下面直接给出代码(缩进采用\t,拼接字符串时处理了双引号这一种特殊字符,其他的特殊字符也可以参考双引号进行处理)

function formatJson(json, indent, returnStr) {
	var padding='\t';
	var type = typeof json;
	if(type=='object'){
		if(json instanceof Array){
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +='[\r\n';
			var pad = "";
			for(var i=0;i<indent+1;i++){
				pad += padding;
			}
			for(var j=0;j<json.length;j++){
				var data = json[j];
				returnStr= formatJson(data, indent+1, returnStr);
				if(j<json.length-1){
					returnStr +=',\r\n';
				}else{
					returnStr +='\r\n';
				}
			}
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +=']\r\n';
			
		}else{
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +='{\r\n';
			var pad = "";
			for(var i=0;i<indent+1;i++){
				pad += padding;
			}
			var proNum = Object.getOwnPropertyNames(json).length;
			var i=0;
			for(var key in json){
				i++;
				var value = json[key];
				returnStr +=pad;
				returnStr = returnStr+'"' +key +'":';
				returnStr = formatJson(value, indent+1, returnStr);
				if(i<proNum){
					returnStr +=',\r\n';
				}else{
					returnStr +='\r\n';
				}
			}
			if(indent >0){
				var pad = "";
				for(var i=0;i<indent;i++){
					pad += padding;
				}
				returnStr +=pad;
			}
			returnStr +='}\r\n';
		}
	}else{
		returnStr = returnStr + '"'+json.replace(/\"/g,'\\"')+'"';
	}
	return returnStr.replace(/\r\n\r\n/g,'\r\n').replace(/\r\n,\r\n/g,',\r\n');
}

方法的三个参数:json是需要处理的json对象,indent是缩进的层级,returnStr是最后返回的字符串

调用时

var str =new String("");
str=formatJson(data,0,str);


最终展示的效果如图



反过来,将格式化的json字符串转换成json对象,需要将多余的换行符和缩进去掉。

var newStr = $(".apiJSONStr").val();
var reg =/\n/g;
newStr = newStr .replace(reg,'');//replace \r\n
reg=/(\t)/g;
newStr = newStr .replace(reg,'');
try{
	JSON.parse(newStr );
}catch (e) {
	alert("JSON数据格式异常,请排查!");
}


本文地址  http://blog.youkuaiyun.com/musa875643dn/article/details/71173304

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值