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"  @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-editorv-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-columnprop="key"label="KEY"width="180"></el-table-column><el-table-columnprop="value"label="VALUE"width="180"></el-table-column><el-table-columnprop="A_Exsits"label="A是否存在"></el-table-column><el-table-columnprop="A_value"label="A对应VALUE值"></el-table-column><el-table-columnprop="B_Exsits"label="B是否存在"></el-table-column><el-table-columnprop="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) {// debuggerconsole.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 = jsonafor 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"] = keydic["value"] = valuedic["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"] = keydic["value"] = valuedic["A_Exsits"] = 'Y'dic["A_value"] = base_info[key][value]dic["B_Exsits"] = 'N'dic["B_value"] = ''result.append(dic)else:dic = {}dic["key"] = keydic["value"] = valuedic["A_Exsits"] = 'Y'dic["A_value"] = base_info[key][value]dic["B_Exsits"] = 'N'dic["B_value"] = ''result.append(dic)return result

json格式数据比对相关推荐

python response.json()报错_Django JsonResponse json格式报错解决Django响应JsonResponse返回json格式数据报错问题...
想了解解决Django响应JsonResponse返回json格式数据报错问题的相关内容吗,彭世瑜在本文为您仔细讲解Django JsonResponse json格式报错的相关知识和一些Code实例 ...
netcore读取json文件_.net core读取json格式的配置文件
在.Net Framework中,配置文件一般采用的是XML格式的,.NET Framework提供了专门的ConfigurationManager来读取配置文件的内容,.net core中推荐使用j ...
php读取本地xlsx格式文件的数据并按json格式返回
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 目的:php读取并操作本地xlsx格式的文件: 完整示例代码: 代码讲解:前端发起post网络请求,php接收 ...
PHP 3 HTML POST带参数请求后端返回json格式的数据给前端
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 前端代码 <!DOCTYPE html> <html lang="zh" ...
如何在Django中接收JSON格式的数据
Django做了大量工作简化我们的Web开发工作, 这其中当然也包括接收来自客户端的数据这一普遍需求. 大部分时候,从客户端传入的数据主要是FORM的POST数据,和来自URL的GET数据, 在Dja ...
Asp.net无刷新调用后台实体类数据并以Json格式返回
新建一般处理程序 public class Temp {public int Index { get; set; }public string Description { get; set; }pub ...
【Postman】6 Postman 发送post请求-Json格式
一.post请求说明使用postman发送一个post请求,在上文中测试流程中提到的4个要素:URL.请求方式.请求头部信息及body数据. body中设置的请求参数,常见的有如下三种: 1.x-w ...
Spring Boot 无侵入式实现 API 接口统一 JSON 格式返回
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! 无侵入式统一返回JSON格式其实本没有没打算写这篇博客 ...
在python中使用json格式存储数据
在python中使用json格式存储数据代码如下: import jsonlist1 = [{'A': [1, 2, 3, 4, 5, 6], 'B': [3, 4, 5, 6, 7]},{'C': ...

json格式数据比对

json格式数据比对相关推荐

最新文章

热门文章