几种常见的JSON数据格式化

一、格式化化后不可修改

<pre>{{ JSON.stringify(inputData, null, 4) }}</pre> <!--格式化json数据，inputData为json对象-->

二、格式化后可修改数据

方式1：

<template><div class="content"><el-buttontype="primary"size="mini"@click="saveMesg">保存</el-button><el-inputtype="textarea"class="leftInput"v-model="inputValue"@change="changeValue"></el-input></div>
</template><script>export default {name: 'Json',data() {return {inputValue: '',inputData: {'inputData-输入变量': {'applyInfo-申请信息': {'ApplyTime-申请时间': 'NA','ChannelCode': 'NA','IDCardNo': '2403242********340','Age': 28},'DSWorkflow-客户信息': {'NextDSCods': 'node4','StepNo': -999}}}};},mounted() {this.inputValue = JSON.stringify(this.inputData, null, 4)},methods: {changeValue() {if (this.inputValue && typeof (this.inputValue) === 'string') {try {let data = ''data = JSON.parse(this.inputValue)this.inputValue = JSON.stringify(data, null, 4)} catch (e) {this.$notify({title: '数据格式有误',type: 'error',duration: 2500})return true}}},saveMesg() {if (this.changeValue()) {return}// 将输入框里的内容转成字符串传给后端this.inputData = JSON.parse(this.inputValue)console.log(this.inputData)}}}
</script><style lang="scss">.content {margin-top: 10px;width: 400px;height: 500px;}.content .el-textarea__inner {margin-top: 10px;height: 380px;line-height: 20px;}
</style>

方式2：

<template><div class="content"><el-buttontype="primary"size="mini"@click="saveMesg">保存</el-button><el-inputtype="textarea"class="leftInput"v-model="inputValue"@change="changeValue"></el-input></div>
</template><script>export default {name: 'Json',data() {return {inputValue: '',inputData: {'inputData-输入变量': {'applyInfo-申请信息': {'ApplyTime-申请时间': 'NA','ChannelCode': 'NA','IDCardNo': '2403242********340','Age': 28},'DSWorkflow-客户信息': {'NextDSCods': 'node4','StepNo': -999}}}};},mounted() {// 将json数据转成字符串显示在输入框里this.inputValue = this.format(JSON.stringify(this.inputData))},methods: {changeValue() {if (this.inputValue && typeof (this.inputValue) === 'string') {try {this.inputValue = JSON.parse(this.inputValue)this.inputValue = this.format(JSON.stringify(this.inputValue))} catch (e) {this.$notify({title: '数据格式有误',type: 'error',duration: 2500})return true}}},// 格式化json数据format(str){var stack = []; //栈-用于括号匹配var tmpStr = '';    //新格式化JSON字符串var len = Object.keys(str).length;   //原始JSON长度//遍历每一个字符for (let i = 0; i < len; i++) {//当遇到结构块起始结构if (str[i] == '{' || str[i] === '[') {//起始结构后面直接换行tmpStr += str[i] + "\n";//入栈stack.push(str[i]);//这里的意思是结构块起始的下一行开始就会有一个缩进，缩进量与遇到的结构块起始符个数成正比1:1tmpStr += "\t".repeat(stack.length);}//当遇到结构块结束符else if (str[i] == ']' || str[i] === '}') {//因为本身JSON格式是固定的，所以括号一定是成对的，这里先不考虑错误的json数据//遇到结束符就退栈，stack.pop();//结束符本身输出到下一行，并减少一个缩进tmpStr += "\n"+"\t".repeat(stack.length) + str[i];}//当遇到逗号的时候else if (str[i] == ',') {//逗号后方直接换行，以及下一行的缩进处理tmpStr += str[i] + "\n" + "\t".repeat(stack.length);}else {//其他字符直接复制tmpStr += str[i];}}return tmpStr;},saveMesg() {if (this.changeValue()) {return}// 将输入框里的内容转成字符串传给后端this.inputData = JSON.parse(this.inputValue)console.log(this.inputData)}}}
</script><style lang="scss">.content {margin-top: 10px;width: 400px;height: 500px;}.content .el-textarea__inner {margin-top: 10px;height: 380px;line-height: 20px;}
</style>