Java/Javascript/JSON - Passing JSON string from Java into Javascript

Question

I'm passing a JSON string I create in Java as a parameter to a Javascript method called from my servlet. However, when I pass the JSON string, Firebug warns me about the string being passed:

Java code:

String jsonString = "{\"id\":1,\"name\":\"Joe Smith\",\"data\":{\"email\":\"[email protected]\",\"phone\":\"555-123-4567\",\"title\":\"CFO\",\"instanceControllerTagLibraryApi\":{\"developmentMode\":false}},\"children\":[],\"instanceControllerTagLibraryApi\":{\"developmentMode\":false}}";

pw.println("<body onload=\"init('"+jsonString+"');\">");

Javascript:

function init(text){
    alert(text);
}

I've tried quoting the string during the pass and removing the single quotes. Both basically point to the fact that the string being passed needs to escape the curly braces (somehow).

Error (single quote):

SyntaxError: unterminated string literal [Break On This Error]

init('{

Even with that example above (created during the same process), it gives me the exact same error. — user82302124
– user82302124, Commented Sep 11, 2012 at 23:49
What is the browser getting?! Show us, that helps a lot, you know. — Jared Farrish
– Jared Farrish, Commented Sep 11, 2012 at 23:51
I added the exact error from Firebug at the bottom. Is that not enough? Thanks again for helping. — user82302124
– user82302124, Commented Sep 11, 2012 at 23:53
Does it work if you replace the escaped double quotes \" with simple quotes '? — Pao
– Pao, Commented Sep 12, 2012 at 0:04

Halcyon · Accepted Answer · 2012-09-11 23:57:27Z

4

The error is not in the JSON string, it's in the other bit of code.

pw.println("<body onload=\"init('"+jsonString+"');\">"); is really crude attempt to add an onload event.

Don't try to add the JSON string into the HTML string, it wont work because of the quotes, unless you doubly escape the JSON string, which is just silly.

Currently you output will look like:

<body onload="init('{"id":1, ... }');">
                     ^--- syntax error after this

It will try to execute the JS code init('{.

answered Sep 11, 2012 at 23:57

Halcyon

57.8k10 gold badges93 silver badges131 bronze badges

Certainly obvious enough, but if the actual markup the browser was borking on was included, it would have been very clear where the exact problem was.

Jared Farrish
– Jared Farrish

09/12/2012 00:04:32
Commented Sep 12, 2012 at 0:04
Also note the Chrome Console literally tells you exactly where the error occurs (see the Console tab and click on the link to the far right of the error text). Consider abandoning alert()-based debugging, and switch to the much saner and more useful console debugging.

Jared Farrish
– Jared Farrish

09/12/2012 00:09:24
Commented Sep 12, 2012 at 0:09
Jared - Again, this was the exact json string I used. Frits - Thanks for the answer. I'll look into alternatives.

user82302124
– user82302124

09/12/2012 00:09:37
Commented Sep 12, 2012 at 0:09
@g1021maxED - Why would it have been so hard to include the actual markup causing the problem? We're trying to help you, y'know.

Jared Farrish
– Jared Farrish

09/12/2012 00:11:26
Commented Sep 12, 2012 at 0:11
1

@g1021maxED - Oops, forgot to give you the test fiddle demo: jsfiddle.net/userdude/eQRBk

Jared Farrish
– Jared Farrish

09/12/2012 00:14:41
Commented Sep 12, 2012 at 0:14

| Show 1 more comment

Jared Farrish · Accepted Answer · 2012-09-12 00:32:26Z

Frits was able to figure out your problem, which was good. I would definitely take his advice and move away quickly from using body onload.

For instance:

(function run(){
    var data = '{"id":1,"name":"Joe Smith","data":{"email":"[email protected]","phone":"555-123-4567","title":"CFO","instanceControllerTagLibraryApi":{"developmentMode":false}},"children":[],"instanceControllerTagLibraryApi":{"developmentMode":false}}';

    function init(){
        console.log(data, JSON.parse(data));
    }

    if (window.addEventListener) {
        window.addEventListener('load', init);
    } else if (window.attachEvent) {
        window.attachEvent('load', init);
    }
})();

http://jsfiddle.net/userdude/eQRBk/1/

Notice the use of window.addEventListener (and the legacy window.attachEvent for older IE versions). And that console.log works better in Chrome and Firebug; IE's console is a little more frustrating in how it logs objects, in my opinion.

Using what you've given, you could (and I would suggest should) handle it differently. Forgive me, however, I'm not that well-versed in Java and JSP is all I know (barely). So...?

<%

String jsonString = "'{\"id\":1,\"name\":\"Joe Smith\",\"data\":{\"email\":\"[email protected]\",\"phone\":\"555-123-4567\",\"title\":\"CFO\",\"instanceControllerTagLibraryApi\":{\"developmentMode\":false}},\"children\":[],\"instanceControllerTagLibraryApi\":{\"developmentMode\":false}}'";

%>
<script>
(function run(){
    var data = <%=jsonString%>;

    function init(){
        console.log(data, JSON.parse(data));
    }

    if (window.addEventListener) {
        window.addEventListener('load', init);
    } else if (window.attachEvent) {
        window.attachEvent('load', init);
    }
})();
</script>

And then you can insert that JSP page into the head or the body and it will work fine. I also imagine you could set it up to dynamically inject that data into the JSP page. But, like I said, I'm kinda waving my hands here.

Collectives™ on Stack Overflow

Java/Javascript/JSON - Passing JSON string from Java into Javascript

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related