json format data comparison

Effect picture

vue part

<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>

There are several feedbacks in bold style that require a back-end comparison function, which is actually very simple. It is based on one of them, and the other is traversed, such as:

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