javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > json-diff渲染json字符串对比结果

如何通过递归方法实现用json-diff渲染json字符串对比结果

作者：郑丫头

JsonDiff是一个高性能json差异发现工具,它几乎可以发现任何JSON结构的差异,并且将错误信息反馈给用户,下面这篇文章主要给大家介绍了关于如何通过递归方法实现用json-diff渲染json字符串对比结果的相关资料,需要的朋友可以参考下

前言

上一篇，对比了js-diff和json-diff，发现js-diff对比的结果返回的是拆分后字符串并且字符串中带有换行符跟空格，将拆分后的字符串拼接可以得到完整的两个json格式化后的信息。但是json-diff只返回了两个json中有修改的的部分，并且返回类型还要根据值类型来进行判断。

分析json-diff的结构

用两个数组嵌套对象，对象嵌套数组的比较复杂的json进行对比，获得的数据如下：

var json1 = {
  name: '小明',
  age: '22',
  hobby: ['篮球', '足球', '羽毛球'],
  grade: {
    English: ['130', '129', '135'],
    Chinese: ['120', '118', '122'],
    sports: ['90', '90', '90'],
  },
  honor: [{ desc: '获得数学竞赛第一名', info: [{ score: '100', ranking: 1 }, 2, 3] }],
}
var json2 = {
  name: '小红',
  age: '22',
  hobby: ['乒乓球', '羽毛球'],
  grade: {
    English: ['120', '129', '125'],
    Chinese: ['140', '139', '136'],
    sports: ['90', '90', '90'],
  },
  honor: [{ desc: '获得作文比赛第一名', info: [{ score: '99', rank: 2 }, 2, 3] }],
}
var jsonDiff = {
    "name": {
        "__old": "小明",
        "__new": "小红"
    },
    "hobby": [
        [
            "-",
            "篮球"
        ],
        [
            "-",
            "足球"
        ],
        [
            "+",
            "乒乓球"
        ],
        [
            " "
        ]
    ],
    "grade": {
        "English": [
            [
                "-",
                "130"
            ],
            [
                "+",
                "120"
            ],
            [
                " "
            ],
            [
                "-",
                "135"
            ],
            [
                "+",
                "125"
            ]
        ],
        "Chinese": [
            [
                "-",
                "120"
            ],
            [
                "-",
                "118"
            ],
            [
                "-",
                "122"
            ],
            [
                "+",
                "140"
            ],
            [
                "+",
                "139"
            ],
            [
                "+",
                "136"
            ]
        ]
    },
    "honor": [
        [
            "~",
            {
                "desc": {
                    "__old": "获得数学竞赛第一名",
                    "__new": "获得作文比赛第一名"
                },
                "info": [
                    [
                        "~",
                        {
                            "ranking__deleted": 1,
                            "rank__added": 2,
                            "score": {
                                "__old": "100",
                                "__new": "99"
                            }
                        }
                    ],
                    [
                        " "
                    ],
                    [
                        " "
                    ]
                ]
            }
        ]
    ]
};

可以观察到：

解析结构图如下：

太绕了，画图之后才看的明白一点ORZ...

用递归方法拼接json字符串

首先创建一个函数用来判断json是否为数组，renderobj(diffObj, originObj, n)，diffObj表示当层的diff对象，originObj表示当层的json1对象，n表示深度，第一层深度为0，主要为了方便计算缩进。

renderobj函数：

// 定义remove和add队列
const removeList = [];
const addlist = [];
if (diffObj instanceof Array) {
    // 数组的判断
} else if (typeof diffObj == 'object'){
    if (diffObj.__new) {
        // 字符串修改
    } else {
        // 非数组对象修改
    }
}

字符串修改

当diffObj.__new为真时，__old同时有值，表示字符串做修改，此时可以直接把__new放到addList,__old存入removeList。

addlist.push(`<span style="color:red;">"${diffObj.__new}"</span>,<br/>`);
removeList.push(`<span style="color:red;">"${diffObj.__old}"</span>,<br/>`);

非数组对象修改

const { addHtml, removeHtml } = renderObject(diffObj, originObj, n);
addlist.push(addHtml);
removeList.push(removeHtml);

非数组对象要判断key的值，创建函数renderObject(diffObj, originObj, n)，传参同renderobj。

const addlist = [];
const removeList = [];
addlist.push(`{</br>`);
removeList.push(`{</br>`);

// 遍历originObj，遍历diffObj...

addlist.push(`${spaceStr.repeat(n)}},</br>`);
removeList.push(`${spaceStr.repeat(n)}},</br>`);
return {
  addHtml: addlist.join(''),
  removeHtml: removeList.join(''),
};

为啥要分别遍历originObj和diffObj？因为json1对象中没有新增的key，diffObj中没有返回未修改key。

const spaceStr = '    ';
Object.keys(originObj).forEach(key => {
  const keyVal = diffObj[key];
  if (keyVal) {
   // renderobj重新判断修改类型
    const { addHtml, removeHtml } = renderobj(keyVal, originObj[key], n + 1);
    if (keyVal.__new) {
      // 当字符串修改时，将整行标红
      addlist.push('<div class="error-line-add">');
      removeList.push('<div class="error-line-remove">');
    }
    addlist.push(`${spaceStr.repeat(n + 1)}"${key}": ${addHtml}`);
    removeList.push(`${spaceStr.repeat(n + 1)}"${key}": ${removeHtml}`);
    if (keyVal.__new) {
      addlist.push(`</div>`);
      removeList.push(`</div>`);
    }
  } else {
    const remove = diffObj[key + '__deleted'];
    if (remove) {
      // 删除的属性
      removeList.push('<div class="error-line-remove">');
      removeList.push(
        `<span style="color:red;">${spaceStr.repeat(n + 1)}"${key}": ${renderJson(
          remove,
          n + 1
        )}</span></br>`
      );
      removeList.push('</div>');
    } else {
      // 没修改的属性直接存入
      addlist.push(
        `${spaceStr.repeat(n + 1)}"${key}": ${renderJson(originObj[key], n + 1)}</br>`
      );
      removeList.push(
        `${spaceStr.repeat(n + 1)}"${key}": ${renderJson(originObj[key], n + 1)}</br>`
      );
    }
  }
})
Object.keys(diffObj).forEach(key => {
  // 新增的属性，json1中没有，从diffObj中遍历
  if (key.includes('__added')) {
    addlist.push('<div class="error-line-add">');
    addlist.push(
      `<span style="color: red;">${spaceStr.repeat(n + 1)}"${key.replace('__added', '')}": "${diffObj[key]}",</br></span>`
    );
    addlist.push('</div>');
  }
});

数组对象修改

遍历diffObj，判断item[0]的值，当值为空格时，需要从json1中获取原属性值，diffObj中空格所在的索引位置有可能和originObj中索引的位置不同，要排除掉'+'新增的成员；当值为'+'时，直接将值存入addList;当值为'-'时，直接将值存入removeList;当值为'~'时，表示有修改，修改类型不确定需要重新循环判断。

addlist.push(`[</br>`);
removeList.push(`[</br>`);
diffObj.forEach((item, i) => {
    switch (item[0]) {
      case '~': {
        // 有修改，重新判断修改的值的类型
        const { addHtml, removeHtml } = renderobj(item[1], originObj[i], n + 1);
        addlist.push(`${spaceStr.repeat(n + 1)}${addHtml}`);
        removeList.push(`${spaceStr.repeat(n + 1)}${removeHtml}`);
        break;
      }
      case '-': {
        // 删除属性
        removeList.push('<div class="error-line-remove">');
        removeList.push(
          `<span style="color: red;">${spaceStr.repeat(n + 1)}${renderJson(
            item[1],
            n + 1
          )}</br>`
        );
        removeList.push('</div>');
        break;
      }
      case '+': {
        // 新增属性
        addlist.push('<div class="error-line-add">');
        addlist.push(
          `<span style="color: red;">${spaceStr.repeat(n + 1)}${renderJson(
            item[1],
            n + 1
          )}</br>`
        );
        addlist.push('</div>');
        break;
      }
      case ' ': {
        // 属性未修改，从originObj中获取，注意对应的index不包括新增的属性
        const index = diffObj.slice(0, i).filter(item => item[0] != '+').length;
        const value = originObj[index];
        const itemStr = `${spaceStr.repeat(n + 1)}${renderJson(value, n + 1)}</br>`;
        addlist.push(itemStr);
        removeList.push(itemStr);
        break;
      }
    }
});
addlist.push(`${spaceStr.repeat(n)}],</br>`);
removeList.push(`${spaceStr.repeat(n)}],</br>`);

renderJson函数，用来格式化json值：

const renderJson = (json, n) => {
  if (!json) {
    return "";
  }
  if (typeof json == "string" || typeof json == "number") {
    return `"${json}",`;
  }
  return `${JSON.stringify(json, null, "\t")
    .replace(new RegExp("\n", "g"), `</br>${spaceStr.repeat(n)}`)
    .replace(new RegExp("\t", "g"), spaceStr.repeat(n))},`;
};

最后对比显示结果如下：

总结

到此这篇关于如何通过递归方法实现用json-diff渲染json字符串对比结果的文章就介绍到这了,更多相关json-diff渲染json字符串对比结果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文