1441

Given a string of JSON data, how can I safely turn that string into a JavaScript object?

Obviously I can do this unsafely with something like:

var obj = eval("(" + json + ')');

but that leaves me vulnerable to the JSON string containing other code, which it seems very dangerous to simply eval.

5
  • 81
    In most languages eval carries an additional risk. Eval leaves an open door to be exploited by hackers. HOWEVER, remember that all javascript runs on the client. EXPECT that it will be changed by hackers. They can EVAL anything they want, just by using the console. You must build your protection on the server side.
    – Beachhouse
    Feb 7, 2013 at 17:34
  • 21
    Ok, now it is 2014 and you should never use eval in order to parse a JSON string because you would be exposing your code to "code injection". Use JSON.parse(yourString) instead.
    – Daniel
    Oct 22, 2014 at 6:27
  • Is the JSON data a literal ?
    – shanechiu
    Sep 25, 2017 at 10:02
  • @shanechiu: if you mean a scalar data type, yes it is. Is just a string with a key-value syntax in it.
    – 0zkr PM
    Sep 17, 2018 at 18:09
  • See the documentation on the parse() method: w3schools.com/js/js_json_parse.asp
    – Ale Gu
    Jul 17, 2020 at 20:56

27 Answers 27

2076

JSON.parse(jsonString) is a pure JavaScript approach so long as you can guarantee a reasonably modern browser.

13
  • 75
    I'm pretty sure it's safe for Node.js
    – Stephen
    Oct 18, 2011 at 17:07
  • 77
    @vsync you do realise that this is the ONLY Pure Javascript Answer... if you read the description for the javascript tag you will see this... "Unless a tag for a framework/library is also included, a pure JavaScript answer is expected.".. I give this a +1 for being the only javascript answer...
    – iConnor
    Jul 21, 2013 at 22:31
  • 4
    Pretty safe to use.
    – Redsandro
    Oct 8, 2013 at 11:52
  • 12
    If you are doing NodeJS, there is no way I would load up jQuery just to parse a jsonString into a JSON object. So upvote Jonathan's answer
    – Antony
    Oct 15, 2013 at 16:49
  • 6
    According to this link it is supported by IE8+, although it says: Requires document to be in IE8+ standards mode to work in IE8. Jan 12, 2015 at 21:19
892

The jQuery method is now deprecated. Use this method instead:

let jsonObject = JSON.parse(jsonString);

Original answer using deprecated jQuery functionality:

If you're using jQuery just use:

jQuery.parseJSON( jsonString );

It's exactly what you're looking for (see the jQuery documentation).

3
  • 7
    Is there a reason to use this over JSON.parse()?
    – Jon
    Mar 20, 2016 at 2:02
  • 8
    jQuery.parseJSON defaults to using JSON.parse if it exists, so the only reason to use this over the real one is if you need a fallback for <IE7. It was changed way back in jQuery 1.6: james.padolsey.com/jquery/#v=1.6.0&fn=jQuery.parseJSON Apr 5, 2016 at 20:49
  • 11
    2016 update: As of jQuery 3.0, $.parseJSON is deprecated and you should use the native JSON.parse method instead.
    – jkdev
    Jun 28, 2016 at 22:36
165

This answer is for IE < 7, for modern browsers check Jonathan's answer above.

This answer is outdated and Jonathan's answer above (JSON.parse(jsonString)) is now the best answer.

JSON.org has JSON parsers for many languages including four different ones for JavaScript. I believe most people would consider json2.js their goto implementation.

3
  • 28
    I wish people would stop down-voting this answer. It was accurate when it was posted in 2008. Just upvote the new one.
    – John
    Jan 16, 2015 at 2:26
  • 23
    If the answer is now outdated, consider updating it. Mar 7, 2015 at 5:35
  • 3
    for IE < 8 you need to use this. Jul 16, 2015 at 20:22
77

Use the simple code example in "JSON.parse()":

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';
var contact = JSON.parse(jsontext);

and reversing it:

var str = JSON.stringify(arr);
0
25

This seems to be the issue:

An input that is received via Ajax websocket etc, and it will be in String format, but you need to know if it is JSON.parsable. The touble is, if you always run it through JSON.parse, the program MAY continue "successfully" but you'll still see an error thrown in the console with the dreaded "Error: unexpected token 'x'".

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});
2
  • NO. The issue is that you are expecting a JSON object and could end up with (function(){ postCookiesToHostileServer(); }()); or even nastier stuff in the context of Node.
    – Yaur
    Apr 15, 2014 at 21:56
  • Well JSON.parse scrubs the input of functions (which in this case would not help as its an IIF --> object). It seems the best way to go about this subject is try/catch. (See edit)
    – Cody
    Apr 24, 2014 at 21:11
24

I'm not sure about other ways to do it but here's how you do it in Prototype (JSON tutorial).

new Ajax.Request('/some_url', {
  method:'get',
  requestHeaders: {Accept: 'application/json'},
  onSuccess: function(transport){
    var json = transport.responseText.evalJSON(true);
  }
});

Calling evalJSON() with true as the argument sanitizes the incoming string.

20

If you're using jQuery, you can also use:

$.getJSON(url, function(data) { });

Then you can do things like

data.key1.something
data.key1.something_else

etc.

1
  • you are using jQuery, aren't you ? Sep 2, 2010 at 14:09
17

Just for fun, here is a way using a function:

 jsonObject = (new Function('return ' + jsonFormatData))()
3
  • 2
    Interesting approach, I'm not sure I'd use this with JSON.Parse available, but it's nice to see someone thinking outside of the box.
    – user1017882
    Sep 3, 2015 at 10:58
  • 6
    This is very similar to just using eval to do it and isn't safe. :P
    – Florrie
    Nov 7, 2015 at 12:18
  • 9
    This has all the drawbacks of using eval but is more complicated and harder for maintainers to understand.
    – Quentin
    Nov 24, 2015 at 15:06
16
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

The callback is passed the returned data, which will be a JavaScript object or array as defined by the JSON structure and parsed using the $.parseJSON() method.

14

Using JSON.parse is probably the best way.

Here's an example

var jsonRes = '{ "students" : [' +
          '{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
          '{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
          '{ "firstName":"James" , "lastName":"Henry","age":15 } ]}';
var studentObject = JSON.parse(jsonRes);
10

Try using the method with this Data object. ex:Data='{result:true,count:1}'

try {
  eval('var obj=' + Data);
  console.log(obj.count);
}
catch(e) {
  console.log(e.message);
}

This method really helps in Nodejs when you are working with serial port programming

4
  • It is really funny how people are fixated to "eval is evil" and they'll do anything to avoid it, even re-writing the whole eval-functionality..
    – diynevala
    Sep 12, 2014 at 10:52
  • Is consensus this trick is a safe method turning string into JSON object? I could use this as no additional js imports are needed.
    – Whome
    Oct 13, 2014 at 10:48
  • 1
    ANY approach using eval or Function is equally vulnerable
    – Slai
    Jun 3, 2018 at 12:32
  • 1
    undefined; function bye() {...} bye();
    – Salvioner
    Jan 22, 2019 at 12:41
9

The easiest way using parse() method:

var response = '{"result":true,"count":1}';
var JsonObject= JSON.parse(response);

Then you can get the values of the JSON elements, for example:

var myResponseResult = JsonObject.result;
var myResponseCount = JsonObject.count;

Using jQuery as described in the jQuery.parseJSON() documentation:

JSON.parse(jsonString);
5

I found a "better" way:

In CoffeeScript:

try data = JSON.parse(jqxhr.responseText)
data ||= { message: 'Server error, please retry' }

In Javascript:

var data;

try {
  data = JSON.parse(jqxhr.responseText);
} catch (_error) {}

data || (data = {
  message: 'Server error, please retry'
});
4

JSON parsing is always a pain. If the input is not as expected it throws an error and crashes what you are doing.

You can use the following tiny function to safely parse your input. It always turns an object even if the input is not valid or is already an object which is better for most cases:

JSON.safeParse = function (input, def) {
  // Convert null to empty object
  if (!input) {
    return def || {};
  } else if (Object.prototype.toString.call(input) === '[object Object]') {
    return input;
  }
  try {
    return JSON.parse(input);
  } catch (e) {
    return def || {};
  }
};
7
  • Object.prototype.toString.call(input) === '[object Object]' should be typeof input === 'object' IMO
    – Serge K.
    Dec 6, 2017 at 16:16
  • typeof input returns object for null and arrays as well. So it is not the safe way of doing this. Jan 9, 2018 at 20:13
  • You already covered the null case before, and an array is an Object. If you want to test it, you can use instanceof. Moreover, if you give this function an Array, it will catch and return def when it could have returned the perfectly fine array.
    – Serge K.
    Jan 10, 2018 at 8:56
  • My comment was about a common sense while catching objects. My function can have several preventions but using typeof input is not the preferred way of detecting objects in general. Jan 10, 2018 at 9:30
  • IMO, common sense doesn't use toString() method to check wether a variable is an object or not. See AngularJS, jQuery, Underscore, or even devs
    – Serge K.
    Jan 10, 2018 at 13:34
3
JSON.parse(jsonString);

json.parse will change into object.

3

If we have a string like this:

"{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"

then we can simply use JSON.parse twice to convert this string to a JSON object:

var sampleString = "{\"status\":1,\"token\":\"65b4352b2dfc4957a09add0ce5714059\"}"
var jsonString= JSON.parse(sampleString)
var jsonObject= JSON.parse(jsonString)

And we can extract values from the JSON object using:

// instead of last JSON.parse:
var { status, token } = JSON.parse(jsonString);

The result will be:

status = 1 and token = 65b4352b2dfc4957a09add0ce5714059
3

JSON.parse() converts any JSON string passed into the function into a JSON object.

To understand it better, press F12 to open "Inspect Element" in your browser and go to the console to write the following commands:

var response = '{"result":true,"count":1}'; //sample json object(string form)
JSON.parse(response); //converts passed string to JSON Object.

Now run the command:

console.log(JSON.parse(response));

You'll get output as an Object {result: true, count: 1}.

In order to use that Object, you can assign it to the variable, maybe obj:

var obj = JSON.parse(response);

By using obj and the dot (.) operator you can access properties of the JSON object.

Try to run the command:

console.log(obj.result);
3

Official documentation:

The JSON.parse() method parses a JSON string, constructing the JavaScript value or object described by the string. An optional reviver function can be provided to perform a transformation on the resulting object before it is returned.

Syntax:

JSON.parse(text[, reviver])

Parameters:

text : The string to parse as JSON. See the JSON object for a description of JSON syntax.

reviver (optional) : If a function, this prescribes how the value originally produced by parsing is transformed, before being returned.

Return value

The Object corresponding to the given JSON text.

Exceptions

Throws a SyntaxError exception if the string to parse is not valid JSON.

3

Parse the JSON string with JSON.parse(), and the data becomes a JavaScript object:

JSON.parse(jsonString)

Here, JSON represents to process JSON dataset.

Imagine we received this text from a web server:

'{ "name":"John", "age":30, "city":"New York"}'

To parse into a JSON object:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); 

Here obj is the respective JSON object which looks like:

{ "name":"John", "age":30, "city":"New York"}

To fetch a value use the . operator:

obj.name // John
obj.age //30

Convert a JavaScript object into a string with JSON.stringify().

2

Converting the object to JSON, and then parsing it, works for me, like:

JSON.parse(JSON.stringify(object))
0
1

Just to the cover parse for different input types

Parse the data with JSON.parse(), and the data becomes a JavaScript object.

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

When using the JSON.parse() on a JSON derived from an array, the method will return a JavaScript array, instead of a JavaScript object.

var myArr = JSON.parse(this.responseText);
console.log(myArr[0]);

Date objects are not allowed in JSON. For Dates do somthing like this

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

Functions are not allowed in JSON. If you need to include a function, write it as a string.

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
1

Performance

There are already good answer for this question, but I was curious about performance and today 2020.09.21 I conduct tests on MacOs HighSierra 10.13.6 on Chrome v85, Safari v13.1.2 and Firefox v80 for chosen solutions.

Results

  • eval/Function (A,B,C) approach is fast on Chrome (but for big-deep object N=1000 they crash: "maximum stack call exceed)
  • eval (A) is fast/medium fast on all browsers
  • JSON.parse (D,E) are fastest on Safari and Firefox

enter image description here

Details

I perform 4 tests cases:

  • for small shallow object HERE
  • for small deep object HERE
  • for big shallow object HERE
  • for big deep object HERE

Object used in above tests came from HERE

let obj_ShallowSmall = {
  field0: false,
  field1: true,
  field2: 1,
  field3: 0,
  field4: null,
  field5: [],
  field6: {},
  field7: "text7",
  field8: "text8",
}

let obj_DeepSmall = {
  level0: {
   level1: {
    level2: {
     level3: {
      level4: {
       level5: {
        level6: {
         level7: {
          level8: {
           level9: [[[[[[[[[['abc']]]]]]]]]],
  }}}}}}}}},
};

let obj_ShallowBig = Array(1000).fill(0).reduce((a,c,i) => (a['field'+i]=getField(i),a) ,{});


let obj_DeepBig = genDeepObject(1000);



// ------------------
// Show objects
// ------------------

console.log('obj_ShallowSmall:',JSON.stringify(obj_ShallowSmall));
console.log('obj_DeepSmall:',JSON.stringify(obj_DeepSmall));
console.log('obj_ShallowBig:',JSON.stringify(obj_ShallowBig));
console.log('obj_DeepBig:',JSON.stringify(obj_DeepBig));




// ------------------
// HELPERS
// ------------------

function getField(k) {
  let i=k%10;
  if(i==0) return false;
  if(i==1) return true;
  if(i==2) return k;
  if(i==3) return 0;
  if(i==4) return null;
  if(i==5) return [];
  if(i==6) return {};  
  if(i>=7) return "text"+k;
}

function genDeepObject(N) {
  // generate: {level0:{level1:{...levelN: {end:[[[...N-times...['abc']...]]] }}}...}}}
  let obj={};
  let o=obj;
  let arr = [];
  let a=arr;

  for(let i=0; i<N; i++) {
    o['level'+i]={};
    o=o['level'+i];
    let aa=[];
    a.push(aa);
    a=aa;
  }

  a[0]='abc';
  o['end']=arr;
  return obj;
}

Below snippet presents chosen solutions

// src: https://stackoverflow.com/q/45015/860099
function A(json) {
  return eval("(" + json + ')');
}

// https://stackoverflow.com/a/26377600/860099
function B(json) {
  return (new Function('return ('+json+')'))()
}


// improved https://stackoverflow.com/a/26377600/860099
function C(json) {
  return Function('return ('+json+')')()
}

// src: https://stackoverflow.com/a/5686237/860099
function D(json) {
  return JSON.parse(json);
}

// src: https://stackoverflow.com/a/233630/860099
function E(json) {
  return $.parseJSON(json)
}



 
// --------------------
// TEST
// --------------------

let json = '{"a":"abc","b":"123","d":[1,2,3],"e":{"a":1,"b":2,"c":3}}';

[A,B,C,D,E].map(f=> {  
  console.log(
    f.name + ' ' + JSON.stringify(f(json))
  )})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This shippet only presents functions used in performance tests - it not perform tests itself!

And here are example results for chrome

enter image description here

0

Older question, I know, however nobody notice this solution by using new Function(), an anonymous function that returns the data.


Just an example:

 var oData = 'test1:"This is my object",test2:"This is my object"';

 if( typeof oData !== 'object' )
  try {
   oData = (new Function('return {'+oData+'};'))();
  }
  catch(e) { oData=false; }

 if( typeof oData !== 'object' )
  { alert( 'Error in code' ); }
 else {
        alert( oData.test1 );
        alert( oData.test2 );
      }

This is a little more safe because it executes inside a function and do not compile in your code directly. So if there is a function declaration inside it, it will not be bound to the default window object.

I use this to 'compile' configuration settings of DOM elements (for example the data attribute) simple and fast.

0

Summary:

Javascript (both browser and NodeJS) have a built in JSON object. On this Object are 2 convenient methods for dealing with JSON. They are the following:

  1. JSON.parse() Takes JSON as argument, returns JS object
  2. JSON.stringify() Takes JS object as argument returns JSON object

Other applications:

Besides for very conveniently dealing with JSON they have can be used for other means. The combination of both JSON methods allows us to make very easy make deep clones of arrays or objects. For example:

let arr1 = [1, 2, [3 ,4]];
let newArr = arr1.slice();

arr1[2][0] = 'changed'; 
console.log(newArr); // not a deep clone

let arr2 = [1, 2, [3 ,4]];
let newArrDeepclone = JSON.parse(JSON.stringify(arr2));

arr2[2][0] = 'changed'; 
console.log(newArrDeepclone); // A deep clone, values unchanged

0

You also can use reviver function to filter.

var data = JSON.parse(jsonString, function reviver(key, value) {
   //your code here to filter
});

For more information read JSON.parse.

-2

Try this.This one is written in typescript.

         export function safeJsonParse(str: string) {
               try {
                 return JSON.parse(str);
                   } catch (e) {
                 return str;
                 }
           }
3
  • I'm new to Typescript. What benefit does this add to JSON.parse()?
    – Marc L.
    Oct 19, 2018 at 12:30
  • If any exception occurred, this will return the input string itself Oct 31, 2018 at 6:55
  • @MarcL. as far I know, TypeScript not modify JSON.parse() and any others system methods (but I not make research in this direction) Sep 26, 2020 at 11:09
-2
/**
 * Safely turning a JSON string into an object
 *
 * @param {String} str - JSON String
 * @returns deserialized object, false if error
 */
export function jsonParse(str) {
  let data = null;
  try {
    data = JSON.parse(str);
  } catch (err) {
    return false;
  }
  return data;
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.