carlosnz / json-edit-react Goto Github PK
View Code? Open in Web Editor NEWReact component for editing/viewing JSON/object data
Home Page: https://carlosnz.github.io/json-edit-react/
License: MIT License
React component for editing/viewing JSON/object data
Home Page: https://carlosnz.github.io/json-edit-react/
License: MIT License
Hi,
Firstly, thank you for implementing the drag and drop feature!
I have a question, is it possible to validate the data within the editor by using a JSONSchema
or anything similar?
I have need of this in my project, so I'd like to know if this is available!
Getting this upon saving edited value
Uncaught (in promise) TypeError: Object(...) is not a function
le index.esm.js:1
onEdit index.esm.js:1
v index.esm.js:1
v index.esm.js:1
onEdit index.esm.js:1
L index.esm.js:1
React 14
unstable_runWithPriority scheduler.development.js:468
React 4
the implementation
<JsonEditor
data={{ test: 1, test2: 2, test3: 3 }}
// enableClipboard={true}
// restrictEdit={false}
// restrictDelete={true}
// restrictAdd={true}
// restrictTypeSelection={true}
onEdit={(data)=>{
console.log(TAG,"OnEdit...");
}}
onUpdate={(data) => {
console.log(TAG, "OnUpdate :", data);
}}
/>
Something like this would look better:
>hoursSchedule: [ 24 items
0, 1, 2, 3, 4, 5, 6,
7, 8, 9, 10, 11, 12,
13, 14, 15, 16, 17,
18, 19, 20, 21, 22,
23
]
Would affect both the collection layout and the JSON.stringify()
display when editing, so not trivial to do nicely.
Similarly for "small" arrays, it would look nicer if they were all on one line.
Currently, if you pass a custom node, it can no longer be edited using json-edit-react (you would have to integrate your own editor). We should make this an option, and when editing the contents will just be interpreted normally (i.e. as a string, boolean, etc.)
Describe the bug
Empty string is a valid object key but is not allowed nor parsed correctly as input
Try to add a key to a object named "" (the empty string)
Or provide such an object value as input in code (and then editting that value produces an error)
Expected behavior
Empty string should work like every other valid key
Screenshots
Not required
Online demo
Not required
Keep it simple, but should be able to pass a localised strings object to the component so English strings can be replaced.
Hello,
I'd like to be able to re-order properties. Drag and drop one above the other.
Is this possible?
They should all share the same, even if not used -- it's simpler that way
I'd like to have a comprehensive automated test suite for this project. However, I don't really know how to go about it. If anyone has experience creating test cases for UI elements and would like to contribute, that'd be really handy.
It would need to be able to confirm the state of the UI elements on screen as a result of certain events.
And.... also specify custom text (so we can display the operator for Fig Tree)
For this example json, lets edit d1->text1
value and put some very big string into it:
{
"d1": {
"text1": "This is text1",
"text2": "This is text1"
},
"d2": {
"name": "name-of-something",
"args": {
"some_key": "some-val"
}
},
"next": {
"kkk": "v-v-v"
}
}
Expected behavior
Demo from https://carlosnz.github.io/json-edit-react/
This will be done via external validation library being called by onUpdate function -- so it can basically already be done, just need to tidy a couple of small things
This is mainly just so I can build a UI for FigTreeEvaluator without having to start from scratch.
Idea is for this component to accept an additional prop, customNodes
, which is an array of:
{
condition: FilterFunction,
component: React.Component
}
Then for any field in the json-edit-react data object, if the "condition" criteria is met, we return the "component", which handles its own internal logic for how to render and process the data field.
Accept another "Filter function" prop defining which elements should be hidden from display.
Currently, when the "keySort" prop is enabled, the data is displayed alphabetically by key, or by a compareFunction.
However, this is just for display and doesn't change the underlying data. It might be useful to have a commitSort
option that actually modifies the data object according to the sort rules.
Keen to get some input as to what would be useful/expected in this regard.
I actually don't want to add any additional UI to the component itself, but I think it would be good to accept a "search" prop and then filter accordingly. I'd even handle the debouncing, so the external Search input can be pretty simple.
Describe the bug
When clicking the "Edit" icon for a collection that is in a collapsed state, the Edit input is not visible, and there is no way to bring it back.
Probably need to do a check for collapsed state and open it up before switching to edit mode
Originally posted by @michelcrypt4d4mus in #46 (comment)
ok so now i tried to use your package in my app and got an error: Property 'getComputedStyle' doesn't exist
. any ideas? seems like it might be a dependency issue (maybe related to why it wouldn't install easily) but i'm not a javascript developer really...
This is how i'm using it in a file called current_daemon_status.js
. I'm certain that what's in serviceStatus
is a valid data structure (i can JSON.stringify()
it just fine):
export default function CurrentDaemonStatus() {
<...snipped API retrieval code...>
return <JsonEditor data={serviceStatus} />;
}
Here is the App.js
file:
export default function App() {
return (
<Provider store={store}>
<View style={styles.container}>
<ImageBackground source={BACKGROUND_IMAGE} imageStyle={styles.bg_image} resizeMode="cover">
<CurrentDaemonStatus style={styles.overlay_text}/>
</ImageBackground>
<StatusBar style="auto" />
</View>
</Provider>
);
};
my iOS simulator shows this:
STDERR shows:
ERROR ReferenceError: Property 'getComputedStyle' doesn't exist
This error is located at:
in CollectionNode (created by Editor)
in div (created by Editor)
in Editor
in CollapseProvider
in ThemeProvider
in Unknown (at current_daemon_status.js:32)
in CurrentDaemonStatus (at App.js:20)
in RCTView (at View.js:116)
in View (at ImageBackground.js:82)
in ImageBackground (at App.js:17)
in RCTView (at View.js:116)
in View (at App.js:15)
in Provider (at App.js:14)
in App (at withDevTools.ios.js:29)
in withDevTools(App) (at renderApplication.js:57)
in RCTView (at View.js:116)
in View (at AppContainer.js:127)
in RCTView (at View.js:116)
in View (at AppContainer.js:155)
in AppContainer (at renderApplication.js:50)
in main(RootComponent) (at renderApplication.js:67), js engine: hermes
As discussed starting from this comment
Hi, I can't seem to get the Add button to work on properties that are arrays. I can edit the whole array using the edit button and adding the values in the text editor there. But when I press the Add button on any array property to add to it, I'm getting an error.
json-edit-react.js?t=1707483740439&v=3e66a0aa:18 Uncaught (in promise) Error: Invalid property path: test.arr[3] Couldn't access "3" in {"test":{"arr":[1,0,0]}} at r (json-edit-react.js?t=1707483740439&v=3e66a0aa:18:11) at l (json-edit-react.js?t=1707483740439&v=3e66a0aa:74:28) at i (json-edit-react.js?t=1707483740439&v=3e66a0aa:43:95) at i (json-edit-react.js?t=1707483740439&v=3e66a0aa:57:5) at i (json-edit-react.js?t=1707483740439&v=3e66a0aa:57:5) at o (json-edit-react.js?t=1707483740439&v=3e66a0aa:31:57) at updateDataObject (json-edit-react.js?t=1707483740439&v=3e66a0aa:674:40) at json-edit-react.js?t=1707483740439&v=3e66a0aa:661:62 at Generator.next (<anonymous>) at json-edit-react.js?t=1707483740439&v=3e66a0aa:288:67
It's trying to access "3" which is exactly what I'm trying to add, so it doesn't exist yet.
The adding with plus/add icon works on objects, but not on arrays. Is it some kind of bug, or am I doing something wrong? It doesn't work even in the simplest case like the one I'm showing though.
Currently you have to just delete one, then make a new one with the same value. Direct editing of keys might be useful.
And maybe export some utility methods (e.g. truncate()
)
Describe the bug
In the 1.11.0 version I was able to hide the rootName
, because I don't need for aesthetic reasons. I wanted to make the editor as clean as possible.
With the 1.11.7 version it's no longer possible. I'am forced to use some rootName
, otherwise an <empty string>
string will be displayed, which is not so beautiful.
Expected behavior
Empty rootName
prop should hide the rootName
as in prev versions.
My code:
<JsonEditor
data={JSON.parse(configProperty.metaValue as string)}
rootName=""
enableClipboard={false}
indent={2}
restrictEdit={true}
restrictDelete={true}
restrictAdd={true}
showCollectionCount={false}
maxWidth="100%"
className="form-control rounded-0 mb-3"
/>
Describe the bug
When a string value is a JWT token or something similar
Expected behavior
The string is breaking out of the Parent container. It should really wrap to a new line.
Potential Fix
I added a small css hack which solve the issue but should probably be added to the default css.
.jer-value-string {
overflow-wrap: anywhere;
}
Great work though buddy!!
Should also pass child nodes through
Rather than the standard 0-based numbering
Maybe other states, too. For example, a "disabled" state at which time it can't be edited.
Collapse prop not working properly to collapse/expand object at given level
So, i am aware that if i ctrl/alt + click i will expand all the object but i do not want to do that, i want to put an external button to do the same using a useState variable , i should be able to control that expand/collapse behavior using the collapse
prop but when i do the following below, the arrow will render as open but won't show the data, is there a way to actually achieve this collapse/expand feature by using an external button and not the ctrl/alt + click ?
Would like to extend it to have more potential control (e.g. being able to specify font weights and styles for each token), but without over-complicating the system.
As per this comment and subsequent responses
Also sort:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.