difftable v0.1.4

difftable

A react component for comparing json objects displays the results as a table

• react
• json diff

Installation

npm i difftable

func or view

1. difftable
2. diffJson
3. diffJsonTree
4. singleDiffJson

1.Use difftable(example)

code

import { DiffTable } from "difftable";

const Demo = () => {
  const before = {
    a: 66,
    b: 55,
  };
  const after = {
    c: 55,
  };
  return <DiffTable before={before} after={after} />;
};
export default Demo;

result

2.Use diffJson(example)

code

import { diffJson } from "difftable";

const befores = [
    {
      a: 88,
      c: {
        d: 66,
      },
    },
  ];
  const afters = [
    { a: 77, b: 888 },
    {
      a: 88,
      c: {
        d: 55,
        g: {
          cg: [{ a: 8888, b: 666 }],
        },
      },
    },
  ];
  console.log(diffJson(befores, afters, 'a'));

result

[
    {
        "option": "none", // unchanged
        "beforeValue": 88,
        "afterValue": 88,
        "position": "/a", // Be in
        "keyValue": 88 // Compared by the value of key
    },
    {
        "option": "modify",  // The value has been modified
        "beforeValue": 66,
        "afterValue": 55,
        "position": "/c/d", // When the value of a is 88, the value of c.d is changed
        "keyValue": 88
    },
    {
        "option": "add", // New data
        "afterValue": {
            "cg": [
                {
                    "a": 8888,
                    "b": 666
                }
            ]
        },
        "position": "/c/g",
        "keyValue": 88
    },
    {
        "option": "add", // New data
        "afterValue": "{\n  \"a\": 77,\n  \"b\": 888\n}",
        "position": "", // There is no match for afters in befores; this object is brand new
        "keyValue": 77
    }
]

3.Use diffJsonTree(example)

code

import { diffJsonTree } from "difftable";

const befores = [
    {
      a: 88,
      c: {
        d: 66,
      },
    },
  ];
  const afters = [
    { a: 77, b: 888 },
    {
      a: 88,
      c: {
        d: 55,
        g: {
          cg: [{ a: 8888, b: 666 }],
        },
      },
    },
  ];
  console.log(diffJsonTree(befores, afters, 'a'));

result

[
    {
        "option": "object", // If option is object, the data has changed
        "keyValue": 88,
        "a": {  
            "option": "none",
            "beforeValue": 88,
            "afterValue": 88,
            "keyValue": ""
        },
        "c": {
            "option": "object",
            "keyValue": "",
            "d": {  // exapmle:  When the value of a is 88,the value of c.d is changed
                "option": "modify",
                "beforeValue": 66,
                "afterValue": 55,
                "keyValue": ""
            },
            "g": {
                "option": "add",
                "afterValue": {
                    "cg": [
                        {
                            "a": 8888,
                            "b": 666
                        }
                    ]
                },
                "keyValue": ""
            }
        }
    },
    { // new item
        "option": "add",
        "afterValue": "{\n  \"a\": 77,\n  \"b\": 888\n}",
        "keyValue": 77
    }
]

4.Use singleDiffJson(example)

code

import { singleDiffJson } from "difftable";

const befores = [
    {
      a: 88,
      c: {
        d: 66,
      },
    },
  ];
  const afters = [
    { a: 77, b: 888 },
    {
      a: 88,
      c: {
        d: 55,
        g: {
          cg: [{ a: 8888, b: 666 }],
        },
      },
    },
  ];
  console.log(singleDiffJson(befores, afters, 'a'));

result

// Compare the value corresponding to the key of each item
[
    {
        "option": "none",
        "beforeValue": "88",
        "afterValue": "88",
        "position": "a",
        "keyValue": 88 
    },
    {
        "option": "modify",
        "beforeValue": "{\n  \"d\": 66\n}",
        "afterValue": "{\n  \"d\": 55,\n  \"g\": {\n    \"cg\": [\n      {\n        \"a\": 8888,\n        \"b\": 666\n      }\n    ]\n  }\n}",
        "position": "c",
        "keyValue": 88
    },
    {
        "option": "add",
        "afterValue": "77",
        "position": "a",
        "keyValue": 77
    },
    {
        "option": "add",
        "afterValue": "888",
        "position": "b",
        "keyValue": 77
    }
]