JSON Patch format RFC 6902

[marcosh]

On the backend of our application we are storing JSON patches using the RFC 6902 standard format. Now we would like to provide a visualization for those patches and your library is the best looking one.

Is there a way to use it to show in the browser a RFC 6902 JSON patch?

[RexSkz]

TL;DR: currently there's only a solution that provides similar (but not accurate) display.

json-diff-kit is aimed at displaying two JSONs and highlighting their diff, not showing the diff/patch itself.

To use this library, I guess you may need to calculate the result first (e.g. use fast-json-patch or other libraries to get the result), then pass the two JSONs to json-diff-kit.

But since there are some operations that are beyond the ability of a diff algorithm (e.g. "move", "copy"), the display will look different from the patch operations.

---

As the author of the library, I think it's technically possible to skip the diff algorithm and use the JSON patch data directly. But to get a better display, we need to add extra elements to the Viewer component, such as explicitly adding some arrows to show the "move" and "copy" actions.

[marcosh]

Thank you for the quick response!

If I understand correctly there are two kinds of issues:

• JSON patch having operations like move and copy which json-diff-kit does not consider at the moment (this is probably not an issue for my specific case, but it's there in general)
• json-diff-kit storing more metadata than what JSON patch provides, to provide a nicer visual representation of the diff

Do you think it would be possible to create a [DiffResult[], DiffResult[]] (which, if I understand correctly, is the output of Differ.diff and the input for the Viewer component) from a Json patch containing only Add, Remove and Replace operations and failing if other operations are contained?

[RexSkz]

It may not be that easy. We should align the same key for the two JSONs, which means we should insert some empty lines when necessary. It's easy to implement in my algorithm, but not easy for users without recursively traversing the whole JSON structure.

Actually, if we only consider "add", "remove", and "replace" ops, your idea will output the same result as mine, and mine seems to be easier for you to implement. Why not have a try?

[marcosh]

I guess the main point here is that I don't have the initial JSON (I could rebuild it by applying all the patches, but that's an expensive operation which I'm trying to avoid), I have only a JSON patch and I would like to visualize it.

Basically I would need a function JsonPatch -> [DiffResult[], DiffResult[]], not a function (JSON, JSONPatch) -> [DiffResult[], DiffResult[]]

[RexSkz]

The DiffResult contains the line and JSON info, which can not be separated. There's no method to generate it without the JSON itself.

For example, one of the DiffResult says line 12 in the left is recognised as "remove", how do we know the line number is 12 with only op, path and value?

[marcosh]

makes sense, thanks for the explanation. This means that my initial goal is not achievable with json-diff-kit. I'll probably change my goal then 😁