What is the solution to fixing the JSON parsing error that says 'JSON.parse: bad control character in string literal'?

Question

What is the solution to fixing the JSON parsing error that says 'JSON.parse: bad control character in string literal'?

When sending data from NodeJS Backend to the client, I utilize the following code:

res.end(filex.replace("<userdata>", JSON.stringify({name:user.name, uid:user._id, profile:user.profile}) ))

//No errors occur here and the object is successfully stringified //The 'user' object is returned in MongoDB's result https://i.stack.imgur.com/5QYJw.png

The resulting JSON string appears as follows:

{"name":"Rishavolva","uid":"5f3ce234fd83024334050872","profile":{"pic":{"small_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ4fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0OH1dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.9NkGnEumn4JW8IN0KFgxgN_6_4wN8qOgezNTyzz9osY","big_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ3fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0N31dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.y...

The 'uid' mentioned above is simply a MongoDB primary key represented as a string, with the other two base 64 strings functioning as JWT tokens.

Upon reaching the browser, the JSON string is parsed using the following method:

JSON.parse(`<userdata>`)
//Please note the usage of filex.replace("<userdata>", JSON.stringify...) on the server side

For your reference, my MongoDB Document looks like this:

After executing JSON.parse on the provided JSON string, the final JavaScript code appears as such:

JSON.parse(`{"name":"Rishavolva","uid":"5f3ce234fd83024334050872","profile":{"pic":{"small_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ4fSx7ImRiX25hbWUiOiJpZnJkYjAwMiIsInRhYmxlIjoiRklMRSIsImlkIjo0OH1dLCJ1aWRfd2hpdGVsaXN0IjoiKiIsImlhdCI6MTU5ODE2MzMzNX0.9NkGnEumn4JW8IN0KFgxgN_6_4wN8qOgezNTyzz9osY","big_link":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyZXBsaWNhcyI6MiwidXJpcyI6W3siZGJfbmFtZSI6ImlmcmRiMDAxIiwidGFibGUiOiJGSUxFIiwiaWQiOjQ3fSx7ImRiX25hbWUiOiJpZnJkYjA...

An error is encountered during this process:

Uncaught SyntaxError: JSON.parse: bad control character in string literal at line 1 column 702 of the JSON data

The issue seems to be related to the presence of '\n' at position 702 within the JSON string.

The question arises - can '\n' be classified as a control character?

How can this be resolved effectively? Is this problem stemming from the MongoDB result?

javascript node.js json mongodb

Answer 1

Answer №1

\n represents a new line in text. When dealing with JSON, these characters need to be escaped when used within strings.

If not properly escaped, an error may occur:

JSON.parse(`{"hello":"world\n"}`)

To avoid this error, ensure proper escaping like so:

   JSON.parse(`{"hello":"world\\n"}`)

To handle this issue, consider using functions such as replace to escape your content before converting it to JSON format. More information can be found here: How to escape a JSON string containing newline characters using JavaScript?

Answer 2

\n represents a new line in text. When dealing with JSON, these characters need to be escaped when used within strings.

If not properly escaped, an error may occur:

JSON.parse(`{"hello":"world\n"}`)

To avoid this error, ensure proper escaping like so:

   JSON.parse(`{"hello":"world\\n"}`)

To handle this issue, consider using functions such as replace to escape your content before converting it to JSON format. More information can be found here: How to escape a JSON string containing newline characters using JavaScript?

Answer 3

Answer №2

After conducting some experiments, I have come up with a solution. The key is to use JSON.stringify() two times,

For example,

html_text.replace('/*<whatever>*/', JSON.stringify( JSON.stringify(the_object) ) )

If we assume that html_text contains the following line

<script>
const object_inbrowser = JSON.parse(/*<whatever>*/)
// you don't need to add quotes, `JSON.stringify` on the server will handle that for you
</script>

Answer 4

After conducting some experiments, I have come up with a solution. The key is to use JSON.stringify() two times,

For example,

html_text.replace('/*<whatever>*/', JSON.stringify( JSON.stringify(the_object) ) )

If we assume that html_text contains the following line

<script>
const object_inbrowser = JSON.parse(/*<whatever>*/)
// you don't need to add quotes, `JSON.stringify` on the server will handle that for you
</script>

What is the solution to fixing the JSON parsing error that says 'JSON.parse: bad control character in string literal'?

Answer №1

Answer №2

Similar questions

What could be causing the issue when the selected option is being changed and the condition does not work

Saving Information from an HTML Form Input?

Having trouble getting the mock module to work with mockImplementation

After I refresh the state in my React form, the data within my child components starts exhibiting odd behavior

Efficiently sending VueJS data to a separate script

Identifying when a user has inputted incorrect $routeparams

Search a database for a specific set of ObjectID using Mongoose

React-dropzone experiencing delays in loading new files for readers

Error in returnTo behavior. The URL is being deleted just before making the post request

What methods can I use to prevent a JavaScript array from getting filled during page loading?

data storage using sessionstorage for session management

Error: XYZ has already been declared in a higher scope in Typescript setInterval

Transforming JSON data into string format

Receiving a reply from the axios function

Implementing jQuery and JavaScript validation for email addresses and usernames

access the first JSON key in Swift

JavaScript onclick event on an image element

Revamping the hyperlinks in my collapsible menu extension

Utilizing Ionic for local data retention

Tips for enabling resize functionality on individual components one at a time