include Support for JSON compare

[saikrishnaakula]

trafficstars

Library only work for Text can we add support for JSON

[Jav3k]

@saikrishnaakula, did you find another react component to compare jsons ?

[dannyseo517]

Not sure if this will help you but I did this to get around it.

  <ReactDiffViewer
    oldValue={JSON.stringify(oldJson, null, 2)}
    newValue={JSON.stringify(newJson, null, 2)}
    splitView
 />

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

[Jav3k]

@kaniseo, yeah. but you can also sort json fields and values and compare them with DiffMethod.LINES

[saikrishnaakula]

Thank you, Definitly it will help but we have to take care of sorting json by keys

Not sure if this will help you but I did this to get around it.

  <ReactDiffViewer
    oldValue={JSON.stringify(oldJson, null, 2)}
    newValue={JSON.stringify(newJson, null, 2)}
    splitView
 />

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

[joshzana]

I worked around the field sorting by using https://github.com/substack/json-stable-stringify and passing in the result to ReactDiffViewer, like this:

import * as stableStringify from "json-stable-stringify";

        <ReactDiffViewer
          oldValue={stableStringify(result.before, {space: "  "})}
          newValue={stableStringify(result.after, {space: "  "})}
          compareMethod={DiffMethod.LINES}
          splitView={true}
        />