json格式数据比对
效果图vue部分<template><div><el-row><div><el-col :span="6"><p>json比对A</p><vue-json-editorv-model="jsonA":show-btns="false":mode="'code'"lang="zh"
·
效果图
vue部分
<template>
<div>
<el-row>
<div>
<el-col :span="6">
<p>json比对A</p>
<vue-json-editor
v-model="jsonA"
:show-btns="false"
:mode="'code'"
lang="zh"
@json-change="onJsonChange"
@json-save="onJsonSave"
@has-error="onError"></vue-json-editor>
</el-col>
</div>
<div>
<el-col :span="6">
<p>json比对B</p>
<vue-json-editor
v-model="jsonB"
:show-btns="false"
:mode="'code'"
lang="zh"
@json-change="onJsonChange"
@json-save="onJsonSave"
@has-error="onError"></vue-json-editor>
</el-col>
</div>
<div>
<el-col :span="6">
<el-button @click="startCompare" type="primary"> 开始比对</el-button>
</el-col>
</div>
<div>
<el-col>
<template>
<el-table
:data="tableData" border height="680px" :row-class-name="tableRowClassName" style="width: 100%">
<el-table-column
prop="key"
label="KEY"
width="180">
</el-table-column>
<el-table-column
prop="value"
label="VALUE"
width="180">
</el-table-column>
<el-table-column
prop="A_Exsits"
label="A是否存在">
</el-table-column>
<el-table-column
prop="A_value"
label="A对应VALUE值">
</el-table-column>
<el-table-column
prop="B_Exsits"
label="B是否存在">
</el-table-column>
<el-table-column
prop="B_value"
label="B对应VALUE值">
</el-table-column>
</el-table>
</template>
</el-col>
</div>
</el-row>
</div>
</template>
<script>
import vueJsonEditor from 'vue-json-editor'
import axios from 'axios'
import { platformBaseUrl } from '@/api/baseHost'
export default {
data () {
return {
jsonA: {'demo':{
'msg': 'demo of jsoneditor'
},
'demo1':{
'msg1': 'demo of jsoneditor'
}},
jsonB: {'demo':{
'msg': 'demo of jsoneditor'
},
'demo1':{
'msg1': 'demo of jsoneditor'
}},
tableData: [{
'key': 'demo',
'value': 'msg',
'A_Exsits': 'Y',
'A_value':'demo of jsoneditor',
'B_Exsits':'Y',
'B_value':'demo of jsoneditor'
},{
'key': 'demo1',
'value': 'msg1',
'A_Exsits': 'Y',
'A_value':'demo of jsoneditor1',
'B_Exsits':'Y',
'B_value':'demo of jsoneditor'
}],
}
},
components: {
vueJsonEditor
},
methods: {
tableRowClassName(tableData) {
// debugger
console.log('11211'+JSON.stringify(tableData))
console.log(JSON.parse(JSON.stringify(tableData)).row.A_value)
if (JSON.parse(JSON.stringify(tableData)).row.A_value == JSON.parse(JSON.stringify(tableData)).row.B_value)
{
return '';
}
return 'success-row';
},
onJsonChange (value) {
console.log('value:', value);
},
showModal(msg) {
console.log('showModal resTrans msg.data after', msg)},
onJsonSave (value) {
console.log('value:', value);
},
onError (value) {
console.log('value:', value);
},
startCompare(){
axios.post(platformBaseUrl + "/api/jsonCompare/", {jsonA:this.jsonA,jsonB:this.jsonB})
.then(response => {
this.tableData = response.data.result;
this.tableRowClassName(JSON.parse( response.data.result ))
return this.tableData
})
.catch(err => {
this.showModal("失败,请检查参数!");
});
}
},
}
</script>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #1E90FF;
}
</style>
加粗样式好几个反馈需要后台的比对函数的,其实很简单。就是以其中一个为基准,另一个遍历,如:
def jsondiff(jsona,jsonb):
# 判断格式
# if is_json(jsona) and is_json(jsonb):
result = []
# 是否为空
if jsona == {}:
return []
else:
# 遍历jsonA 和jsonB比较
# base_info = json.loads(jsona)
base_info = jsona
for key in base_info.keys():
if isinstance(base_info[key], dict):
for value in base_info[key].keys():
if key in jsonb:
if value in jsonb[key]:
dic = {}
dic["key"] = key
dic["value"] = value
dic["A_Exsits"] = 'Y'
dic["A_value"] = base_info[key][value]
dic["B_Exsits"] = 'Y'
dic["B_value"] = jsonb[key][value]
if dic["A_value"]!=dic["B_value"]:
result.append(dic)
else:
dic = {}
dic["key"] = key
dic["value"] = value
dic["A_Exsits"] = 'Y'
dic["A_value"] = base_info[key][value]
dic["B_Exsits"] = 'N'
dic["B_value"] = ''
result.append(dic)
else:
dic = {}
dic["key"] = key
dic["value"] = value
dic["A_Exsits"] = 'Y'
dic["A_value"] = base_info[key][value]
dic["B_Exsits"] = 'N'
dic["B_value"] = ''
result.append(dic)
return result
更多推荐
已为社区贡献4条内容
所有评论(0)