JS格式化json并展示

HaleyTiger

已于 2022-10-03 12:54:29 修改

阅读量9.9k

点赞数 3

分类专栏： Java代码 JavaScript 文章标签： json javascript 前端

于 2020-03-30 09:35:09 首次发布

本文链接：https://blog.csdn.net/hu1010037197/article/details/105088615

版权

Java代码同时被 2 个专栏收录

31 篇文章 1 订阅

订阅专栏

JavaScript

20 篇文章 3 订阅

订阅专栏

一、格式化json数据展示区域

第1种：

<div id="showJsonData1" contenteditable="true" style="width:100%;height:300px;border:1px red solid;">测试</div>

第2种：

<textarea id="showJsonData2" maxlength="10000" class="form-control" rows="25"/>

【注】：
（1）优点：不改变文本格式。
（2）缺点：1）不能内嵌html代码；2）不能设置部分内容样式（只能统一设置内容样式）。

第3种（`推荐`）：既支持格式化展示，又支持嵌入html标签（可加样式等）

<p id="showJsonData3" contenteditable="true">
	<pre id="myPre" style="width:100%;height:300px;overflow-y:auto; overflow-x:auto;background-color:white;">
	</pre>
</p>

【注】： 这里主要靠<pre></pre>标签：
（1）不改变文本格式。
（2）可以内嵌html代码。
（3）支持设置部分内容样式。

二、格式化json数据的js函数

//格式化json @zhangxh
var formatJsonForNotes = function(json, options) {
    var reg = null,
        formatted = '',
        pad = 0,
        PADDING = '  '; // （缩进）可以使用'\t'或不同数量的空格
    // 可选设置
    options = options || {};
    // 在 '{' or '[' follows ':'位置移除新行
    options.newlineAfterColonIfBeforeBraceOrBracket = (options.newlineAfterColonIfBeforeBraceOrBracket === true) ? true : false;
    // 在冒号后面加空格
    options.spaceAfterColon = (options.spaceAfterColon === false) ? false : true;
    // 开始格式化...
    if (typeof json !== 'string') {
        // 确保为JSON字符串
        json = JSON.stringify(json);
    } else {
    	//已经是一个字符串，所以解析和重新字符串化以删除额外的空白
        json = JSON.parse(json);
        json = JSON.stringify(json);
    }
    // 在花括号前后添加换行
    reg = /([\{\}])/g;
    json = json.replace(reg, '\r\n$1\r\n');
    // 在方括号前后添加新行
    reg = /([\[\]])/g;
    json = json.replace(reg, '\r\n$1\r\n');
    // 在逗号后添加新行
    reg = /(\,)/g;
    json = json.replace(reg, '$1\r\n');
    // 删除多个换行
    reg = /(\r\n\r\n)/g;
    json = json.replace(reg, '\r\n');
    // 删除逗号前的换行
    reg = /\r\n\,/g;
    json = json.replace(reg, ',');
    // 可选格式...
    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;
};

三、js格式化json数据（不带注释）

不加注释的前提下，调用格式化函数后，直接可展示到textarea 标签中。

$("#showJsonData2").text(formatJsonForNotes(jsonData));

在这里插入图片描述

四、js格式化json数据（带注释）

（1）后台接口代码：`不通用`

/**
 * 获取格式化json数据（将分发规则的字段数据传到前台）
 * @author zhangxh
 * @param modelSyncRuleDsId 规则id
 * @return
 */
@RequestMapping(value = "getFormatJsonData", method = RequestMethod.GET, produces = { "application/json" })
@ResponseBody
public String getFormatJsonData(String modelSyncRuleDsId) {
	//1.根据规则ID获取“分发规则数据源与模型字段映射关联”数据
	MdmReleaseRuleModelRel ruleModelRel = new MdmReleaseRuleModelRel();
	ruleModelRel.setModelSyncRuleDsId(modelSyncRuleDsId);
	List<MdmReleaseRuleModelRel> ruleModelRelList = mdmReleaseRuleModelRelService.findList(ruleModelRel);
	//2.遍历，获取每个关系对应元数据信息，并存储
	Map<String, String> dataMap = new LinkedHashMap<String, String>();//存储json数据
	Map<String, String> dataNotesMap = new LinkedHashMap<String, String>();//存储json数据对应的名称（注释）
	for (int i = 0; i < ruleModelRelList.size(); i++) {
		MdmModelMetadata modelMetadata = new MdmModelMetadata();
		MdmReleaseRuleModelRel ruleModel = ruleModelRelList.get(i);
		modelMetadata.setId(ruleModel.getMetadataId());
		MdmModelMetadata metaData = mdmModelMetadataService.get(modelMetadata);
		dataMap.put(metaData.getMetadataCode(), "测试数据"+i);//TODO 待修改
		dataNotesMap.put(metaData.getMetadataCode(), metaData.getMetadataName());
	}
	//3.封装返回结果数据
	List<Map<String, String>> dataList = new ArrayList<Map<String, String>>();
	dataList.add(dataMap);
	Map<String, Object> resultMap = new LinkedHashMap<String, Object>();
	resultMap.put("appName", "财经系统"); 
	resultMap.put("appId", "System_of_finance"); 
	resultMap.put("modelName", "财经模型"); 
	resultMap.put("modelCode", "model_001"); 
	resultMap.put("ruleName", "财务分发规则1"); 
	resultMap.put("ruleCode", "finance_rule_001"); 
	resultMap.put("updateColum", "moneyField");
	resultMap.put("data", dataList);
	//4.封装返回结果数据对应的名称（注释）
	List<Map<String, String>> dataNotesList = new ArrayList<Map<String, String>>();
	dataNotesList.add(dataNotesMap);
	Map<String, Object> resultNotesMap = new LinkedHashMap<String, Object>();
	resultNotesMap.put("appName", "应用系统名称"); 
	resultNotesMap.put("appId", "应用系统编码"); 
	resultNotesMap.put("modelName", "模型名称"); 
	resultNotesMap.put("modelCode", "模型编码"); 
	resultNotesMap.put("ruleName", "规则名称"); 
	resultNotesMap.put("ruleCode", "规则编码"); 
	resultNotesMap.put("updateColum", "更新字段");
	resultNotesMap.put("data", dataNotesList);
	//5.封装所有数据并返回
	resultMap.put("resultNotesMap", resultNotesMap);
	return JSON.toJSONString(resultMap);
}

（2）js定制处理(格式化展示已规定)：`不通用`

//格式化json数据 @zhangxh
$("#formatData").click(function(){	
	var modelSyncRuleDsId = $('#modelSyncRuleDsId').val();
	$.ajax({
		url:"${ctx}/mdmreleaserulemodelrel/mdmReleaseRuleModelRel/getFormatJsonData?modelSyncRuleDsId="+modelSyncRuleDsId,
		type:"get",
		data:"",
		dataType:'json',
		success:function(responseData){
			var notesObj = responseData.resultNotesMap;//json数据对应的名称（注释）
			delete responseData.resultNotesMap;//删除json数据对应的名称（注释）
			var jsonData = formatJsonForNotes(responseData);//格式化为标准json
			var reg = /(\r)/g; // 正则：匹配换行符号
			var str = "";//存储拼接注释后的json数据
			var indexOfDataArr = -1;//记录responseData.data数组中的索引，用户匹配数据对应注释所在数组的索引
			jsonData.trim().split('\n').forEach(function(value, index) {//遍历jsonData文本（行遍历）
				if(index > 8 && value.indexOf("{") != -1) {//从第8行开始
					indexOfDataArr++;//responseData.data数组中的索引+1
				}
				//（1）处理固定的前8行数据（如果返回json格式有变化，以下if判断条件均需修改）	
				if(index >= 1 && index < 8){
					var index = value.indexOf(":");
					var key = value.substring(0, index).trim();//获取每一行的key
					if(key.length > 2) {
						key = key.substring(1, key.length-1);//去除两边字符串
					}
					if(key in notesObj) {
						value = value.replace(reg, `    <span style='color:#2C7C2C;'>// `+ notesObj[key] + '</span>\r\n');
						str += value;
					} else {
						str += value;
					}	
				} else if(index > 8 && value.indexOf(":") != -1) {//（2）处理模型数组数据
					var index = value.indexOf(":");
					var key = value.substring(0, index).trim();//获取每一行的key
					if(key.length > 2) key = key.substring(1, key.length-1)
					var dataObj = notesObj.data[indexOfDataArr];
					if(dataObj != null && dataObj != 'undefined' && key in dataObj) {
						value = value.replace(reg, `    <span style='color:#2C7C2C;'>// `+ dataObj[key] + '</span>\r\n');
						str += value;
					} else {
						str += value;
					}		
				}  else {//（3）其他情况（无注释、符号行等）
					str += value;
				}
			});
			//回填
			$("#myPre").html(str);
			$("#myPre").css({
				"font-family": "'微软雅黑','Arial",
				"font-size": "13px!important",
				"line-height": "18px!important",
				"font-weight": "normal"
			});
		},
		error:function(e){
			console.log('ajax请求异常，异常信息如下：', e);
		}
	});
	
});

（3）展示如下：

在这里插入图片描述

HaleyTiger

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
JS格式化json并展示

格式化json数据展示区域<div id="showJsonData" contenteditable="true" style="width:100%;height:300px;border:1px red solid;">测试</div><#form:textarea path="showJsonData" maxlength="10000" class="f...
复制链接

扫一扫