Vue在页面输出JSON对象,测试接口可复制使用

效果图:

数据处理前:

Vue在页面输出JSON对象,测试接口可复制使用_第1张图片 数据处理后:

Vue在页面输出JSON对象,测试接口可复制使用_第2张图片

代码实现: 

HTML:


	
	
	
	
	
		
	
	
	
		
	

js:

this.tableData.forEach(n => {
	n.enteringGinseng = this.setObjorStr(n.enteringGinseng)
})
setObjorStr(obj) {
	let arr = [] //返回一个数组
	let row = '' //组成数组的参数
	let objStr = '' //转化key对应的Value是对象{}的情况
	let arrObj = '' //转化key对应的Value是数组[]里面是对象{}的情况
	for (let i in obj) {
		if (typeof obj[i] === 'object') { // 变量是对象类型
			if (Array.isArray(obj[i])) { // 变量是数组类型
				obj[i].forEach(_ => {
					if (typeof _ === 'object') {
						if (Array.isArray(_)) {
							_ = JSON.stringify(_)
						} else {
							arrObj = this.setObjorStr(_)
							_ = `{${arrObj}}`
						}
					}
				})
				row = `${i} : ${obj[i]}`
			} else {
				objStr = this.setObjorStr(obj[i])
				row = `${i} : {${objStr}}`
			}
		} else {
			row = `${i} : ${JSON.stringify(obj[i])}`
		}
		arr.push(row)
	}
	return arr
},

你可能感兴趣的:(vue.js,json,elementui)