Can't edit undefined values

[IgorAufricht]

Describe the bug When the data contain undefined values, they can't be edited:

1. When I hover over the undefined value, the edit (and delete) buttons don't show
2. When I edit an existing value, I can't choose undefined as the new value

Expected behavior I would expect I can edit undefined values in the same way I can edit null values.

Screenshots

Online demo https://codesandbox.io/p/sandbox/json-edit-react-demo-forked-d2qmml

[IgorAufricht]

I'm not sure if this is a bug or a missing feature, but I think it makes sense to support editing both null and undefined values.

[CarlosNZ]

This was an intentional choice because undefined is not technically part of the JSON format. I could allow undefined values, but the problem is, if you use the "JSON text" edit feature, then what do we do with them?

This view just uses JSON.stringify() and JSON.parse() to present and parse the input, and that causes non-standard JSON values (like undefined) to be stripped out, which would be annoying.

I'm open to suggestions as to how to deal with this. There's a few possible options I can think of:

• if there is an undefined (or any non-standard JSON) values, then we don't allow editing JSON text directly. But that adds some additional complexity and would still potentially be confusing
• filter out non-standard values before JSON.stringify() and re-inject them after JSON.parse() of the input. Again, adds some complexity and potential confustion which I'm not sure is worth it.
• temporarily turn undefined into "undefined" string when editing JSON, then turn it back when parsing. (Would mess up when someone actually has "undefined" as a string, but that's a pretty edge case)
• I'm actually using JSON5 for parsing, to allow a "looser" input text. I could look at trying a different "loose JSON" library, or perhaps implement my own parser to handle non-standard values. But this would be a pretty big job, so would need to really justify it.

I probably won't do either of these without thinking about it some more, and getting a sense for what people would want/expect.

However -- i think you could probably implement a basic undefined editor yourself using Custom Nodes. You can add additional types, and use the condition to catch undefined values and render them as you see fit. I haven't tried this, but I'm happy to have a go if you're having trouble making it work.

[IgorAufricht]

First of all, thanks for the detailed answer!

I always thought of the value for this component (and other json-view-* components) as a JavaScript object, not a literal JSON value. If we go by the JSON definition, then the behavior makes perfect sense.

I played around with the editor a bit more and it looks like values that are no JSON-compliant are not editable (and will get removed when the whole value is edited as JSON). I think that's reasonable behavior.

I don't really need the functionality to edit undefined values, I've just noticed that it doesn't work as I expected. I just replaced the value with null for my use case, so from my point of view there's no need to add this functionality.

(Furthermore, in the case where the value passed to the editor could contain undefined, we can JSON.parse(JSON.stringify()) the value before passing it to the editor to avoid having an uneditable/undeletable values in the data.)

Feel free to close this issue (and thanks for the cool component!).

[CarlosNZ]

Thanks, good to know it's not a critical issue for now. Personally, I can't really see why you'd want to be having users edit data that has "undefined" values, as this would normally be used for things like configs, and undefined is not really a valid "value" (if it's "undefined", it shouldn't be there at all). But some people may have a use for it, I dunno.

I might just chuck in a Custom Node for handling undefineds though, leave it there as another example and if anyone wants to use it they can.

[CarlosNZ]

I'm going to close this one now. I've made a very simple little custom component and put it in the repo, which people can use if they want to be able edit undefined values:

https://github.com/CarlosNZ/json-edit-react/blob/main/demo/src/customComponents/Undefined.tsx

All it does is add "undefined" to the list of available types, and lets undefined values get changed to something else.