GithubHelp home page GithubHelp logo

mercyscope / json-difference Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lukascivil/json-difference

0.0 0.0 0.0 6.96 MB

A simple way to find the difference between two objects or json diff

Home Page: https://lukascivil.github.io/json-difference/

License: MIT License

JavaScript 7.33% TypeScript 91.81% HTML 0.86%

json-difference's Introduction

JsonDifference

Total Downloads npm version CD Release and Publish Project Status: Active โ€“ The project has reached a stable, usable state and is being actively developed. codecov MIT License

Computes the difference between two objects and returns an intuitive result. No matter how big your JSON is, the diff will be returned pretty fast.

The question you should ask is: Given my old structure what was changed, removed or added to the new structure?

This repository contains two npm packages, json-difference and its cli version (json-difference-cli).

It's a very lightweight lib that costs only ๐Ÿชถ 1.95 kB โ”‚ gzip: 0.79 kB.

Live Demo

Master (deprecated link) Latest release (new)

Installation

yarn add json-difference


# If you want to play with the terminal version
yarn add json-difference-cli

Or

<script type="module">
  // https://json-difference.s3.amazonaws.com/<a.b.c>/json-difference-<a.b.c>.mjs
  import { getDiff } from 'https://json-difference.s3.amazonaws.com/1.16.0/json-difference-1.16.0.mjs'
</script>

Example

Running example:

yarn example {simple, stress}

Usage of Json Difference

Method:

getDiff(oldStruct, newStruct)

Returns the structural difference between oldStruct and newStruct.

Simple usage:

import { getDiff } from 'json-difference'

const coffee = { color: { color1: 'black', color2: 'brown' }, special: true }
const oil = { color: { color1: 'red', color2: 'blue' }, special2: false, especial3: [{}] }

// Get JsonDiff delta
const diff = getDiff(coffee, oil)
const diff2 = getDiff(coffee, oil, { isLodashLike: true })

console.log(diff)
console.log(diff2)

Output:

{
  "added": [
    ["special2", false],
    ["especial3", []],
    ["especial3/0[]", {}]
  ],
  "removed": [["special", true]],
  "edited": [
    ["color/color1", "black", "red"],
    ["color/color2", "brown", "blue"]
  ]
}
{
  "added": [
    ["special2", false],
    ["especial3", []],
    ["especial3[0]", {}]
  ],
  "removed": [["special", true]],
  "edited": [
    ["color.color1", "black", "red"],
    ["color.color2", "brown", "blue"]
  ]
}

Usage of Json Difference CLI

# jd -> Json Difference command
# -o -> Original or old struct
# -m -> Modified or new struct
jd -o "{}" -m "[]"

Delta

The delta is an object that contains three properties that follow a pattern. This pattern will be shown below:

Operation Pattern
"edited" [path_to_the_key, old_value, new_value]
"added" [path_to_the_key, value]
"removed" [path_to_the_key, old_value]
value Explanation
"root" Indicates the root of the object
"@{}" Indicates that the key is a non-leaf node of type Object
"@[]" Indicates that the key is a non-leaf node of type Array

Some operations

JSON original JSON modified Delta
{} [] "edited": [ [ "root", {}, [] ] ]
[] {} "edited": [ [ "root", [], {} ] ]
[{}] [[]] "edited": [ [ "0[]", {}, [] ] ]
{"a": "b"} {"a": "c"} "edited": [ [ "a", "b", "c" ] ]
{"":""} {"": "a"} "edited": [ [ "", "", "a" ] ]
{"":{"":""}} {"": {"": "a"}} "edited": [ [ "/", "", "a" ] ]
[] [{}] "added": [ [ "0[]", {} ] ]
{} {"a":"b"} "added": [ [ "a", "b" ] ]
{"a":"b"} {} "removed": [ [ "a", "b" ] ]
[{}] [] "removed": [ [ "0[]", {} ] ]
[{"":""}] {"":""} "added": [ [ "", "" ] ], "removed": [ [ "0[]", {} ], [ "0[]/", "" ] ], "edited": [ [ "root", [], {} ] ]

It is important to understand that the output generated by the latest versions of Json Difference: v1.9.1 and V1.15.7 is different. Version V1.15.7 introduces greater accuracy for the return.

Anyway, to request a new feature or report a problem, just open an issue and it will be investigated.

json-difference's People

Contributors

lukascivil avatar semantic-release-bot avatar ypin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.