How are you using json-edit-react?

[CarlosNZ]

If you're using json-edit-react in a publicly accessible site or app, feel free to share it here.

[qcho]

Hey! Great Library! :D

I'm trying to create a json visualizer for a diff with this lib.

• Creating diffs with jsondiffpatch
• Since every node could be replaced with a diff representation of a value "old => new" I'm trying to use custom nodes for this.
• Everything is "view mode" but i'll be adding some "operations" around diffs that will mutate field-diff-strategy state somehow.

Some things I'm doing that may be weird with current lib status:

• I want to have a toggle for "only show differences". It seems there is not a filter-by-key function that i can use. I don't want to use "searchText" filters. I'm thinking in just filtering the json before it enters the json-edit-react lib.
• "Operations" field based i'll be adding them to the custom component.
• There could be potentially zouzands of differences. I think I'll be creating One custom-component that will evaluate if it needs to render a "diff with operations" or a "greyed out visualization". One because it seems weird to add that amount of custom components just to have a per-key matcher that this library will iterate over until someone matches vs my own matching algorith returning custom components accordingly.

Features that would help me:

• Is there any way to preprocess the json and filter some keys?
• Is there any way to don't render a key:value pair entirely with custom components? like returning null/false.
• Is there any way to transform json objects fo rexample. I could enrich each value with some metadata {meta: {...}, value:{...}} and then i want to render the custom component with meta into account. I'm thinking in adding this metadata via custom props but it is kind of weird.

PD: Oh sorry no publicly available

[CarlosNZ]

Hey! Great Library! :D

Thanks!

It seems there is not a filter-by-key function that i can use. I don't want to use "searchText" filters. I'm thinking in just filtering the json before it enters the json-edit-react lib.

You can definitely filter by key -- just set searchFilter="key", or write a Search Filter Function if you want more flexibility: https://github.com/CarlosNZ/json-edit-react#searchfiltering

Is there any way to don't render a key:value pair entirely with custom components? like returning null/false.

You could just make a custom component that returns null, but it's probably better to write a Search FIlter Function

Is there any way to transform json objects fo rexample. I could enrich each value with some metadata {meta: {...}, value:{...}} and then i want to render the custom component with meta into account.

Sounds to me like you need to make your own pre-processor to transform the data structure before passing to json-edit-react. But not sure without a bit more detail.

Feel free to start a new discussion if you'd like to dig into these questions a little deeper :)