JSON Diff or Compare Component

Hi,

I came accross this component on another lo-code platform and thought it was a great idea - a diff-tool for JSON which outputs the results in a human-readable, side-by-side, way but can also pass out the diffs in an array to be used elsewhere. If you're ever dealing with a situation where you want to quickly understand the raw before/after effects of a data change then this kind of component can be really useful.

3 Likes

@dcsearle did you implement a solution to do this in your app?

i am faced with comparing two JSON objects (temporary state) and returning those records that are different between the two.

hoping i don't have to do a nasty JSON parse and compare and there's something more elegant out there.

thanks for any feedback.

@nels5722 , I did get something together in the end, by no means perfect but was enough for me to snap-compare...

I imported the JSON diffpatch package:
https://cdnjs.cloudflare.com/ajax/libs/jsondiffpatch/0.4.1/jsondiffpatch.umd.min.js

Then added a JS query (note that the JSON I'm comparing is actually converted from XML, but you probably don't care about that step)...

var a = tfrEntityBeforeXMLtoJSON.value;
var b = tfrEntityAfterXMLtoJSON.value;

var delta = jsondiffpatch.diff(a,b);

if (delta == null){
    delta = "Nothing to compare or there are no differences.";
    return delta;
}else{  
return jsondiffpatch.formatters.html.format(
  delta
);  
}

The result of which renders onto a HTML component...

Hope this helps you :slightly_smiling_face:

Dave

2 Likes

big help. thank you. i'm new to retool and js and didn't even know you could import packages.

How do we add the supporting css files??

Hey folks!

There hasn't been movement on including this component yet but we can let you know here when there is! In the meantime, you might be able to create a diff viewer using a custom component with some 3rd part libraries. The JSON attached here uses jsdiff alongside diff2html to generate diffs!


diff_viewer (2).json

1 Like

Thanks Kabirdas! I'll take a look at that, seems a little more elegant than my home-brew version :wink: