Skip to content

How to safely parse JSON in Javascript

JSON stands for Javascript Object Notation and has become wildly popular to transport and store data between application, databases and more.

However, it is not always obvious that a piece of data your application is trying to use may be of type JSON, or be correctly sanitised.

Let’s take a simple Javascript function as follows:

function getNameFromJSONString(jsonString) { // Dangerous! json = JSON.parse(jsonString); // Dangerous again! return; }
Code language: JavaScript (javascript)

What the above function does is take in a string which it believes is a stringified/serialised JSON (perhaps stored in a database), parse it back to a Javascript Object and then return an attribute called name.

Now let’s use the following value for jsonString:

Code language: JavaScript (javascript)

If we ran this test, we would get back "Andrew" in our return.

The problem with this sort of thing is that you should always write software for when things could break. But how do we know what could break? An easy way to find out, is to mess with the jsonString test value.

What happens if we call the function with some other data type. A blank value, or something else perhaps?


Calling the function without passing in any value will give us the following error:

Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) at getNameFromJSONString (<anonymous>:3:17) at <anonymous>:1:1
Code language: CSS (css)

The same would be true if we received some arbitrary string, such as getNameFromJSONString("cheesecake").

Luckily, this is quite easy to fix, so let’s adjust our Javascript function to cater for this.

See also  How to Style an Element using Javascript

We could just wrap the entire contents of the function in a try catch block:

function getNameFromJSONString(jsonString) { try { json = JSON.parse(jsonString); return; } catch (e) { console.log("error"); return false; } }
Code language: JavaScript (javascript)

Or we could do something a bit cleaner:

function getNameFromJSONString(jsonString) { var valid = false; try { json = JSON.parse(jsonString); valid = true; } catch (e) {} return (valid && ? : ""; }
Code language: JavaScript (javascript)

The second option checks to make sure the JSON was parsed and that there is a key with the value name before attempting to return it. As an added step, a blank string is returned if all else fails. This makes sure that our application always gets a valid value back.

Notify of
1 Comment
Oldest Most Voted
Inline Feedbacks
View all comments

[…] Learn how to safely parse JSON using Javascript. Sanitize your application function input variables before using them in this tutorial. Read more […]

Would love your thoughts, please comment.x