How to create a JavaScript object from a JSON string that arrives from Java

Flow
1

\u0000Could someone please give me a hint how to create a JavaScript object in JS from a JSON String that is passed from Java…?\n\nI have a Java object instance (the class extends org.json.JSONObject), which on toString() provides me with the following JSON String (items): \n\n\n {\n \"fruitItems\": \"Apple, Banana, Pear\",\n \"totalAmount\": 6\n }\n\n\nI pass this to JavaScript with the following call: page.executeJs(\"fruitFunction(\" + items.toString() + \");\");\n\nIt arrives correctly in the JavaScript function, but as an object, even though I’ve called .toString(). (I note that I have used the same approach where I had to pass true JSON to a JS library, which worked well.) To pass it to the JavaScript library I am using, I needs to look like this: \n\n\n {\n fruitItems: 'Apple, Banana, Pear',\n totalAmount: 6\n }\n\n\nObserve this is a true JS object, since the keys are not surrounded by double quotes. \n\nI was expecting to do the conversion with: var itemsObject = JSON.parse(items);, but I get an error called "Unexpected token o in JSON at position 1". \n\nAm I missing something on how this is done in Vaadin…? Much appreciated. \uD83D\uDE4F\uD83C\uDFFB\n\n

2

“Unexpected token o” implies that what you are passing to JSON.parse is "[Object object]
" instead of a JSON string.
How did you create the items string.

3

Johannes Häyry:
“Unexpected token o” implies that what you are passing to JSON.parse is "[Object object]
" instead of a JSON string.
How did you create the items string.

Thank you for your reaction Johannes.

items is an instance of a class that directly extends JSONObject. I call toString(), which is handled directly by JSONObject. It should return a pure String , which that is so remarkable. As indicated above, the String is passed to a JS call - page.executeJs("fruitFunction(" + items.toString() + ");");.

4

Oh now I got it. You should call

page.executeJs("fruitFunction($0);", items.toString());

EDIT: I forgot to add that Vaadin has a dependency to elemental.json library which you can also use.

5

\u0000> Johannes H\u00E4yry:\n> Oh now I got it. You should call\n> \n> page.executeJs(\"fruitFunction($0);\", items.toString());\n> \n> EDIT: I forgot to add that Vaadin has a dependency to elemental.json library which you can also use.\n\nAah, excellent, that should be it. Thanks for your response tonight. Much appreciated. \uD83D\uDC4D\uD83C\uDFFB

6

\u0000> > Oh now I got it. You should call\n> > \n> > page.executeJs(\"fruitFunction($0);\", items.toString());\n> > \n> > EDIT: I forgot to add that Vaadin has a dependency to elemental.json library which you can also use.\n> \n> Aah, excellent, that should be it. Thanks for your response tonight. Much appreciated. \uD83D\uDC4D\uD83C\uDFFB\n\nOne final thought: It does seem remarkable that calling page.executeJS(…) without separate parameters does work for quite a few situations. I have successfully used the following methods (which I will now - obviously - revise): \n\n\npage.executeJs(\"fromOriginToDestination(\" + origin.getLongLat() + \", \" + destination.getLongLat() + \");\");\n..\npage.executeJs(\"zoomTo(\" + zoomLevel + \");\");\n..\npage.executeJs(\"renderCustomMap('\" + styleString + \"', \" + initialView.getLongLat() + \",\" + initialZoom + \");\");\n\n\nThe parameters that I included directly in the method call were typically Strings, but not always.

7

I guess it’s about evaluation of the JSON string you pass. If the JSON string is not passed as a parameter but instead in the expression, it will be evaluated resulting in a JS object. With Numbers and Strings I guess it’s not a problem.

8

\u0000I’ve explored some more and must confess I am confused. \n\nWhen I follow your instructions, my JS calls don’t work. I did get several of them to work, but only when n\u00F3t following your suggestion. For most situations, I cannot the JS calls according to the official instructions to work.\n\nBear with me. \n\nMy overall goal is to extend the JS calls in the Mapbox-Flow component I am developing. I would like to add Java support for the different types of functions that are available in Mapbox GL JS, which means adding objects, lines, layers, etc. \n\nSee a simple Mapbox-Flow [demo]
(https://mapbox-flow.herokuapp.com/) and the component in action [here]
(https://dsol-workbench.herokuapp.com/mapbox/simulation). \n\nThe Mapbox-Flow code is in [GitHub]
(https://github.com/markhm/mapbox-flow). Including creating a [Mapbox]
(https://mapbox.com) account and a access token, it takes about 5 mins to checkout and start with mvn jetty:run.\n\nIn the main [MapboxMap class]
(https://github.com/markhm/mapbox-flow/blob/master/src/main/java/com/github/markhm/mapbox/MapboxMap.java), which is the adapter to the JS world, I’ve marked which calls work and which don’t work. \n\nAny thoughts are very much appreciated. \uD83D\uDE4F\uD83C\uDFFB

9

This seems to work:
executeJs("renderDefaultMap($0, $1)", initialView.getLongLat(), initialZoom);

I think this works too because it is elemental.JSONValue
executeJs("renderOptionsMap($0);", getJsonObject());

This does not work as you pass JSON and map.addLayer expects JS object
executeJs("addLayer($0);", carLayer.toString());

// This should not work, but does. Note that .toString() is nót called on the Layer class (which extends JSONObject)
executeJs(“addLayer(” + carLayer + “)”);

And here this definitely should work as the passed JSON is evaluated to JS object which map.addLayer expects. And you call toString() implicitly because + “”

10

\u0000Hi Johannes. I have better understanding of the interaction between Java and JS right now and have written a follow up question: https://vaadin.com/forum/thread/18241053. \n\nAny thoughts you have are much appreciated. \uD83D\uDC4D\uD83C\uDFFB

11

I’m happy you’ve had progress on the add-on. The follow up questions were a bit too tough for me to answer. I asked the dev team if they would have time to answer. Let’s hope so.