@sedeh/differentiate v3.3.3

Welcome to Differentiate Objects!

Have you ever needed to compare two JSON objects and make a determination on what is changed deep in the object hierarchy and be able to clearly see what is changed on either objects on the fly while they change? Have you ever wished for ability to merge the two JSON objects as well? Have you looked for something that is visually appealing as well? Would you like to know how it can be done? Would you like to have it done without writing code for it? Take a look at the demo and enjoy the ride.

Differentiate is an Angular based code and will interpret changes deep in JSON hierarchy through visual representation of changes on both sides. "+" / "-" characters on left-hand side as well as diverging line curves over a node of an object view represent adding/removing of an attribute or a node. "~" characters on left-hand side of a node represent change of value between two name/value pairs.

NOTE: Version 1.5.0 is the latest version compatible with Angular 2+, 4+, or 5+.

NOTE: Version 2.0.0 is the first version compatible with Angular 6+. I tried my demo project with 6+ version of this library while project is still Angular 5 based without facing any issues.

NOTE: Starting with version 2.4.0 you need to import this library through @sedeh/diffrenciate. Future bug fixes / enhancements will be on sedeh scope.

I appreciate comments and requests. please go to provided link and make your comments.

Live Demo | NPM | Comments/Requests

Attributes

Events

MODULE:
EXPORTS:
  DifferentiateComponent
  DifferentiateTree

Instructions

Run npm install @sedeh/differentiate in your application. and do the following:

in your html:

	<differentiate 
		onlyShowDifferences="true"
		attributeOrderIsImportant="true"
		allowRevert="true"
		allowAdvance="true"
		namedRootObject="id,firstname"
		(onrevert)="revert($event)"
		(onadvance)="advance($event)"
    	[leftSideToolTip]="'pull from ' + selectedLeft + ' file'"
    	[rightSideToolTip]="'pull from ' + selectedRight + ' file'"
		[leftSideObject]="leftJSONtree" 
		[rightSideObject]="rightJSONtree"></differentiate>

Initiate / create both leftJSONtree and rightJSONtree in your component. If at any time one of the objects updated, Differentiate re-evaluate and displayed the difference immediately.

To handle onrevert or onadvance events, you need to do something like this

	revert(event) {
		this.myLocalCopyOfJsonOnRightside[event.index] = event.node;
	}

Include the DifferentiateModule module in your App module.

	import { BrowserModule } from '@angular/platform-browser';
	import { NgModule } from '@angular/core';
	import { DifferentiateComponent } from '@sedeh/differentiate';

	import { AppComponent } from './app.component';

	@NgModule({
	  declarations: [
		AppComponent
	  ],
	  imports: [
		BrowserModule,
		DifferentiateComponent
	  ],
	  providers: [
	  ],
	  bootstrap: [AppComponent]
	})
	export class AppModule { }

It is that simple..!!

Version History

Sample view of the component at work! (You can create drop-downs and JSON log views to manipulate the differentiate component...)