Passing JSON string to javascript function

Question

On the server side, I assign the click event of a button

closeWindow.OnClickFunc = String.Format("CloseWindow('{0}');", "{\"codeA\":\"MALE\",\"codeB\":\"SomeCodeB\"}");

When I examine the rendered HTML, it's completely malformed:

<img onclick="CloseWindow('{" src="close.jpg" id="closeLink">

To debug the issue, I got rid of the double quotes in the json string

closeWindow.OnClickFunc = String.Format("CloseWindow('{0}');", "{codeA:MALE,codeB:SomeCodeB}");

Now the HTML is as expected:

<img onclick="CloseWindow('{sectionCodeDB:NEWS,sectionCodeDBNew:NEWS,itemType:REMINDER}');" src="close.jpg" id="closeLink">

So, there's some issue with the double quotes that's messing the HTML.

Any thoughts on how to pass the JSON string?

You actually don't need to pass it as JSON string, pass it as JavaScript object. Have you tried: String.Format("CloseWindow({0});", "{codeA:'MALE',codeB:'SomeCodeB'}") ? (if you use JSON.parse in CloseWindow, you don't need that anymore) — Felix Kling
– Felix Kling, Commented Feb 16, 2011 at 20:25
@Felix, you probably should wrap that comment in an answer :) — Frédéric Hamidi
– Frédéric Hamidi, Commented Feb 16, 2011 at 20:32

Felix Kling · Accepted Answer · 2011-02-16 22:31:00Z

3

Disclaimer: I have never used asp.net, but string formatting functions cannot be so different, right? ;)

Actually, you don't need to pass it as JSON string, pass it as JavaScript object. Try:

closeWindow.OnClickFunc = String.Format("CloseWindow({0});", "{codeA:'MALE',codeB:'SomeCodeB'}")
//                                      no quotes ---^-^

If you used JSON.parse in CloseWindow, you don't need that anymore. You can access the data directly from the parameter, like: param.codeA.

Update:

Regarding escaping issues. If you have

"{\"codeA\":\"MALE\",\"codeB\":\"SomeCodeB\"}"

then this will only escape the quotes in the server side string. The generated code would like :

 <img onclick="CloseWindow('{"codeA":"MALE","codeB":"SomeCodeB"}'" src="close.jpg" id="closeLink">

which is clearly invalid. You would need

<img onclick="CloseWindow('{\"codeA\":\"MALE\",\"codeB\":\"SomeCodeB\"}'" src="close.jpg" id="closeLink">

Now I think you can achieve this with three backslashes in the string:

String.Format("CloseWindow('{0}');", "{\\\"codeA\\\":\\\"MALE\\\",\\\"codeB\\\":\\\"SomeCodeB\\\"}");

There might be a better way though. As I said, I don't know asp.net.

Nevertheless, it is unnecessary to pass the data as JSON string. A plain JavaScript is way simpler.

edited Feb 16, 2011 at 22:31

answered Feb 16, 2011 at 20:37

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DotnetDude Over a year ago

This is not necessarily related to JSON. Any string I create on the serverside that has quotes causes this issue.

Felix Kling Over a year ago

@DotnetDude: Maybe. But your second example only contains single quotes (and this worked). So the above should work at least for this instance. If you don't create JSON, you don't need double quotes. I think \" only escapes the quote in the server side string. If you also want to escape it in the generated code, you need three backslahes: \\\", which should produce an escaped string: \".

Chris Shouts · Accepted Answer · 2011-02-16 20:42:21Z

2

You need to encode / escape the quotes in HTML, just like you escape the quotes in C# / VB.NET.

Server.HtmlEncode(String.Format("CloseWindow('{0}');", "{\"codeA\":\"MALE\",\"codeB\":\"SomeCodeB\"}"));

answered Feb 16, 2011 at 20:42

Chris Shouts

5,4472 gold badges31 silver badges40 bronze badges

Comments

Bonshington · Accepted Answer · 2011-02-17 06:00:17Z

-1

<img onclick="CloseWindow(eval('[{a:123, b:456}]')[0]);" />

add [ ] to string b4 eval

edited Feb 17, 2011 at 6:00

answered Feb 16, 2011 at 20:39

Bonshington

4,0522 gold badges29 silver badges20 bronze badges

4 Comments

Felix Kling Over a year ago

Besides quoting issues, eval is totally unnecessary here. Are you using txtspk? You know, there is no character limits for answers.

Chris Shouts Over a year ago

Does this make a dancing unicorn appear on the screen? If not, I wouldn't use this method.

Felix Kling Over a year ago

@Chris Shouts: You mean like this? (ok, it's running, not dancing... but there is music!).

Bonshington Over a year ago

for quoting, just miss typeing. and for text, the topic ask for json string

Collectives™ on Stack Overflow

Passing JSON string to javascript function

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related