Best form UI and workflow for adding/editing json?

Hey there!

what are the best practices for building a UI that allows the adding and editing of json key/values without using the json editor?

I'm trying to make editing the json fields in our postgres tables user firendly for people who aren't technical

And - whatever the UI would be - how would that get built into a sql-readable form?

Appreciate any tips!

Mitch

@creative_music Greetings Mitch!

I think you want to go down a route as described in this post: Displaying nested JSON in a table - #6 by ugo.ago

The JS query will be the data source for your JSON filled editor table, triggered by the selection of a row in the main table or on the specific cell which holds the JSON data. The table can be stored in a modal or be a component populated somewhere else within the app.

That table will be editable so you could then hook-up changes to the results to write back into the selected row's JSON field.

Here's an example table from seeded variable data:

image

For dynamic JSON keys you'd have to adjust the JS logic to read the current set of data with an Object.keys() type of function in the map statement.

Thanks for the response, @pyrrho!

So the table itself is the UI for the json... would never have though of that. Appreciate it!

1 Like