一种JSON数据前端可视化整合对比方法及装置与流程

本申请涉及数据整合，具体涉及一种json数据前端可视化整合对比方法及装置。

背景技术：

1、随着近年来互联网技术的日异月新，不仅程序员的开发效率有了大幅提升，对系统数据的维护和录入人员的效率要求也在日益增加。传统的系统数据的录入是靠用户对录入页面的每个字段进行输入，页面字段过多或者操作过于复杂的情况时有发生，严重影响了用户对系统数据的维护效率。

2、市面上传统的文件对比工具，都是以某一格式的文件为载体，对比或编辑文件里的数据，无法适应现阶段的开发需求以及工作环境。

3、因此，为满足当前数据整合需求，现提供一种json数据前端可视化整合对比技术。

技术实现思路

1、本申请提供一种json数据前端可视化整合对比方法及装置，对json数据进行可视化比对，对数据进行整合以及差异化展示，实现已有数据的快速重组，满足对数据的整合集成需求。

2、为实现上述目的，本申请提供以下方案。

3、第一方面，本申请提供了一种json数据前端可视化整合对比方法，所述方法包括以下步骤：

4、导入多个待整合json数据；

5、识别多个所述待整合json数据中的相同项以及不同项，隐藏多个所述待整合json数据之间的所述相同项，高亮显示多个所述待整合json数据之间的所述不同项；

6、基于高亮显示的所述不同项以及隐藏的所述相同项，对多个所述待整合json数据进行数据筛选。

7、进一步的，所述识别多个所述待整合json数据中的相同项以及不同项，隐藏多个所述待整合json数据之间的所述相同项，高亮显示多个所述待整合json数据之间的所述不同项中，包括以下步骤：

8、将多个所述待整合json数据渲染至预设的xml页面文件；

9、遍历多个所述待整合json数据中的各项数据，识别多个所述待整合json数据中的相同项以及不同项；

10、所述隐藏所述待整合json数据之间的所述相同项，向所述待整合json数据之间的所述不同项添加高亮标记；

11、基于所述高亮标记，高亮显示多个所述待整合json数据之间的所述不同项。

12、进一步的，将多个所述待整合json数据渲染至xml页面文件中，包括以下步骤：

13、通过vue框架的循环遍历各所述待整合json数据，渲染到所述xml页面文件上。

14、进一步的，将多个所述待整合json数据渲染至xml页面文件中，包括以下步骤：

15、将多个所述待整合json数据中的各字段进行水平对齐展示。

16、进一步的，基于es6语法，遍历多个所述待整合json数据中的各项数据，识别多个所述待整合json数据中的相同项以及不同项。

17、第二方面，本申请提供了一种json数据前端可视化整合对比装置，所述装置包括：

18、数据导入模块，其用于导入多个待整合json数据；

19、数据筛选模块，其用于识别多个所述待整合json数据中的相同项以及不同项，隐藏多个所述待整合json数据之间的所述相同项，高亮显示多个所述待整合json数据之间的所述不同项；

20、数据整合模块，其用于基于高亮显示的所述不同项以及隐藏的所述相同项，对多个所述待整合json数据进行数据筛选。

21、进一步的，所述数据筛选模块还用于将多个所述待整合json数据渲染至预设的xml页面文件；

22、所述数据筛选模块还用于遍历多个所述待整合json数据中的各项数据，识别多个所述待整合json数据中的相同项以及不同项；

23、所述数据筛选模块还用于所述隐藏所述待整合json数据之间的所述相同项，向所述待整合json数据之间的所述不同项添加高亮标记；

24、所述数据筛选模块还用于基于所述高亮标记，高亮显示多个所述待整合json数据之间的所述不同项。

25、进一步的，所述数据筛选模块还用于通过vue框架的循环遍历各所述待整合json数据，渲染到所述xml页面文件上。

26、进一步的，所述数据筛选模块还用于将多个所述待整合json数据中的各字段进行水平对齐展示。

27、进一步的，所述数据筛选模块还用于基于es6语法，遍历多个所述待整合json数据中的各项数据，识别多个所述待整合json数据中的相同项以及不同项。

28、本申请提供的技术方案带来的有益效果包括：

29、本申请对json数据进行可视化比对，对数据进行整合以及差异化展示，实现已有数据的快速重组，满足对数据的整合集成需求。

技术特征：

1.一种json数据前端可视化整合对比方法，其特征在于，所述方法包括以下步骤：

2.如权利要求1所述的json数据前端可视化整合对比方法，其特征在于，所述识别多个所述待整合json数据中的相同项以及不同项，隐藏多个所述待整合json数据之间的所述相同项，高亮显示多个所述待整合json数据之间的所述不同项中，包括以下步骤：

3.如权利要求2所述的json数据前端可视化整合对比方法，其特征在于，将多个所述待整合json数据渲染至xml页面文件中，包括以下步骤：

4.如权利要求2所述的json数据前端可视化整合对比方法，其特征在于，将多个所述待整合json数据渲染至xml页面文件中，包括以下步骤：

5.如权利要求2所述的json数据前端可视化整合对比方法，其特征在于：

6.一种json数据前端可视化整合对比装置，其特征在于，所述装置包括：

7.如权利要求6所述的json数据前端可视化整合对比装置，其特征在于：

8.如权利要求7所述的json数据前端可视化整合对比装置，其特征在于：

9.如权利要求7所述的json数据前端可视化整合对比装置，其特征在于：

10.如权利要求7所述的json数据前端可视化整合对比装置，其特征在于：

技术总结
本申请涉及一种JSON数据前端可视化整合对比方法及装置，涉及数据整合技术领域，该方法包括以下步骤：导入多个待整合JSON数据；识别多个待整合JSON数据中的相同项以及不同项，隐藏多个待整合JSON数据之间的相同项，高亮显示多个待整合JSON数据之间的不同项；基于高亮显示的不同项以及隐藏的相同项，对多个待整合JSON数据进行数据筛选。本申请对JSON数据进行可视化比对，对数据进行整合以及差异化展示，实现已有数据的快速重组，满足对数据的整合集成需求。

技术研发人员：方又强,王璇,常宽
受保护的技术使用者：中电科长江数据有限公司
技术研发日：
技术公布日：2024/1/14