https://kotlinlang.org logo
Join Slack
Powered by
I want to use this json editor component in my kot...
# react
r
I want to use this json editor component in my kotlin react app: https://www.npmjs.com/package/jsoneditor-react When I click a button I want a specific Object to be serialized to json and shown in the editor. However I can't figure out how to feed the serialized json string to the editor. (I can statically set the value property of the editor when it loads like this:
Copy code
attrs {value = js("""{"a":"b"}""")}
, however I can't figure out how to pass in a state variable instead)
s
I think you should have access to
Copy code
JSON.stringify()
Copy code
package kotlin.js
r
yeah i tried that
s
oh wait, you want it to be reactive?
r
well I have a list - and when I select an entry of the list I want to display it in the json editor
(the object which is represented by the entry in the list)
s
Not being familiar with the json editor api I'm not sure about that, but working with json object I've had luck with the above JSON api, also this: https://github.com/Kotlin/kotlinx.serialization#quick-example
r
well the stringify part works - when i print it to console it looks fine
s
Is the editor not reacting the changed state then?
r
at the moment not
but i had it throw an error before in a different iteration on state changes 🙄
s
Are you using redux or hooks?
r
uh guess not
s
Local state with classes?
r
new t client side kotlin - i used this to start https://github.com/JetBrains/create-react-kotlin-app
i have an app component which has state
it creates the editor
and passes the value as property
abstract external class JsonEditor : Component<ReactJsonEditorProperties, JsonEditorState>
s
Are you able to verify the state is changing and is inputting a properly configured string for the editor prop?
Such as dropping the string into a <div>
or pre
r
when the button to select a row is clicked I log the state value which was passed to the editor
that logs like a perfectly fine json string
but
like i said - i could only get it to show properly in the editor when i passed something static in like attrs {value = js("""{"a":"b"}""")}
note the js function
when i only pass in a normal string without js around it
it gets displayed wrong
(e.g. not recognised as key value pairs)
(but displayed like {\"msg\":\"\",\"id\":\"\"} )
usage of the npm is described like this:
Copy code
<Editor
            value={yourJson}
            onChange={this.handleChange}
        />
displaying the string in a <p> updates just fine
I think the main problem is what kind of object should be passed as value attribute to the editor
a simple string doesnt work
(gets displayed wrong, doesn't update)
s
Perhaps it doesn't take a string then, just a regular json object.
?
r
yes
but how do I create one in kotlin
s
Ah
r
🙂
like i said
i tried js()
s
jsObject<Any> {}
r
thx - any pointers how I get my regular object into that form?
s
I'm still working with the same problem in a different form, so I'm not super familiar, but I know that
Copy code
data class State(val version: Int = 1) {
    val users: Array<User> = emptyArray()
}

val test = jsObject<State> { State() }
works for a data class
Not sure about other classes or objects.
r
okay thx will give it a try
s
also 
val test3 =  json("some_property" to 3)
finally you can use the serilaization api to serialize to a string, then deserialize using the JSON.parse method. That's all the ways I've figured so far.
r
hm can't get it to work - will just use a textarea for now instead
thx anyways
Open in Slack
PreviousNext
Powered by