JavaScript & inside a string

Question

I have an input field which accepts college name, and some other input fields for other usage.

1) Next, I'm creating a JSON structure with all these inputs and

2) Doing JSON.Stringify(JSONdata) for this JSON data.

3) Setting the XHR content-type header to:

xhr.setRequestHeader("Content-Type", "application/X-www-form-urlencoded");

calling a post request to server with this stringified input.

There everything works fine, except for this one particular college input which looks something like this:

St. Joseph's College of Arts & Science, Cityname.

After parsing the data at server side, I'm expecting my string at server to look something like this:

"college":"St. Joseph\'s College of Arts & Science, Cityname",

Instead it looks like:

"college":"St. Joseph\'s College of Arts ',' Science, Bangalore",

The & is getting replaced by a , and thus throwing an error:

: Unexpected end of JSON input<br> &nbsp; &nbsp;at Object.parse (native)<br> &nbsp; &nbsp;at server.js:206:28<br> &nbsp; &nbsp;at Layer.handle [as handle_request]

I want it to accept all the input field no matter what's inside it.

the apostrophy (') in the string is splitting the string apart. replace the values by their respective HTML ENTITIES before trying to use them in the object and replace it back when necessary — Akshay Khandelwal, Aug 14 '16 at 12:21
Please show the code for the "calling a post request to server with this stringified input" part. That's where the problem is. — JJJ, Aug 14 '16 at 12:23
JSON is a *textual notation* for data exchange. [(More)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. Thus, your #1 is not "creating a JSON structure," it's just creating a structure. #2 is creating JSON (a string) by using `JSON.stringify` on that structure. — T.J. Crowder, Aug 14 '16 at 12:24

score 1 · Accepted Answer · answered Aug 14 '16 at 12:26

You just need to URI-encode the string you're sending, just like any other time you're sending strings via URI-encoded form data that you're manually creating:

var data = "Data="+encodeURIComponent(JSON.stringify(requestObject));
// ----------------^^^^^^^^^^^^^^^^^^^----------------------------^
xhr.setRequestHeader("Content-Type", "application/X-www-form-urlencoded");
xhr.send(data);

& is special in URI-encoding (as are several other characters). encodeURIComponent ensures those are properly encoded for transmission and decoding at the other end. Once decoded, you'd then use whatever JSON parser you use in your environment to turn the JSON (a string) into an object structure.

Thanks for the response, that solved my problem. I surely learned something new today. I will do a good read on this now. To avoid further asking such silly questions. — nitte93, Aug 14 '16 at 12:38

score 0 · Answer 2 · answered Aug 14 '16 at 12:21

0

You are sending JSON but providing the content-type of a standard <form>. In a form, & is used to separate key-value pairs.

Telling the server you're giving it one thing, and then giving it another thing, is only going to result in pain.

Pass the correct application/json header and all should be well.

answered Aug 14 '16 at 12:21

Niet the Dark Absol

320,036
81
464
592

What do you mean? I'm stringifying it before sending. – nitte93 Aug 14 '16 at 12:22
2

@nitte93user3232918: Right. Which means you're sending JSON. So your server should know you're sending JSON, not URI-encoded data, so that it handles it correctly rather than treating `&` as a field separator. (Or more likely, you want to do something else entirely.) – T.J. Crowder Aug 14 '16 at 12:23
2

Strongly disagree with the downvotes on this, but *"Pass the correct application/json header and all should be well."* is probably quite optimistic. :-) It's rare that people have their stack set up to correctly accept JSON from the client. – T.J. Crowder Aug 14 '16 at 12:27

JavaScript & inside a string

2 Answers2