May I know how can I preserve the plain JSON object while I save to .json file and retrieve from the json file in the properly way.
const jsonObj = [
{
min:1,
max:4,
defaultValue:3,
width:"100%",
label:"Column",
onChange:(evt) => adjustGrid("col", evt),
type:"InputNumber"
},
{
min:1,
max:4,
defaultValue:1,
width:"100%",
label:"Row",
onChange:(evt) => adjustGrid("row", evt),
type:"InputNumber"
}
]
The intention of preserving the plain JSON object is because I want to achieve fully dynamic form element controls with the helps of JSON object.
I have attempted to use JSON.stringify but it escape the onChange key-pair which makes I cannot retrieve back the onChange key when I retrieve it from my .JSON file.
the onChange function is not restricted for adjustGrid function, it can be any function that has been defined in the JS file.
The render code will be:
return jsonObj.map((v) => {
return (
<Form.Item label={v.type}>
<InputNumber
min={v.defaultValue}
max={v.max}
defaultValue={v.defaultValue}
{...v}
width={v.width}
/>
</Form.Item>
)
});
JSON
There is no "JSON Object" to start with, if such a thing can be said to exist: JSON is a notation syntax for serializing data objects. By design it does not serialize object properties that are functions, does not distinguish between null and undefined, and can't encode objects with cyclic property references.
JavaScript
You could use a JavaScript file containing the text in the post - which is JavaScript source code and not JSON anyway. If you don't want to create or make use of global variables in the script, you could use export and import statements for jsonObj from within script files of type "module". The downside for modules is that they are not available using the file:// protocol and must come from a server.
You can't get a function from a stringified Object.
You want to keep code in source control, not in data, so it's a bad practice to do that. Also, it's a security hazard to have executable code in data...
I suggest extracting the handlers and using a conditional:
If you have more handlers, you can create a choose handler function, but i just inlined it here...
const InputItem = ()=>{
const rowHandler = (evt) => adjustGrid("row", evt)
const colHandler = (evt) => adjustGrid("col", evt)
return jsonObj.map((v) => {
return (
<Form.Item label={v.type}>
<InputNumber
//...other properties
onChange = {v.label == "Column" ? colHandler : rowHandler}
/>
</Form.Item>
)
});
}