Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at Scotch On The Rocks (SOTR) 2011 (Edinburgh) with:

Using Javascript's Function() Constructor To Deserialize JSON Data

By Ben Nadel on

Last night, I was reading the jQuery Cookbook (review to come soon) and I came across something that I had never seen before; or rather, they mentioned something that I had never seen before (the concept was not actually demonstrated in the book). They mentioned in a side note that Javascript's Function() constructor could be used to evaluate JSON (Javascript Object Notation) data. I very rarely ever use the Function() constructor, so I wanted to see if I could get this to work.

The Function() constructor takes an optional list of argument names and final content argument and builds a function object using the given content as the method body such that this:

  • function foo( bar ){ alert( bar ); };

... and this:

  • var foo = new Function( "bar", "alert( bar );" );

... are equivalent.

Because our JSON data is string-based in its serialized format as is the above method body, we can easily create a function using the serialized JSON data:

  • <!DOCTYPE HTML>
  • <html>
  • <head>
  • <title>Using Function() To Deserialize JSON Data</title>
  • <script type="text/javascript">
  •  
  • // Mimic the JSON string as it might come back from a
  • // remote AJAX call.
  • var jsonString = "{ 'myArray': ['a','b','c'] }";
  •  
  • // Use the Function constructor to create a function
  • // that will return the JSON object. Because the Function
  • // constructor takes a string value, we can easily
  • // integrate it directly into the method definition.
  • //
  • // NOTE: Immediately invoke the method such that it
  • // returns the evaluated JSON value.
  • var jsonValue = (new Function( "return( " + jsonString + " );" ))();
  •  
  • // Log the new de-serialized JSON value.
  • console.log( jsonValue );
  •  
  • </script>
  • </head>
  • <body>
  • <!--- No data. --->
  • </body>
  • </html>

As you can see, our dynamically generated method body simply returns the JSON data. When we run the above code, we get the following Firebug console output:

 
 
 
 
 
 
Deserializing JSON Data Using Javascript's Function() Constructor. 
 
 
 

Cool - works just fine. I am not sure how this is being run internally to the Javascript engine, or if it's doing anything different than the eval() statement does. I just wanted to see if I could get it to work.



Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

That's pretty sweet. I'd like to see some speed tests done on this code Ben. Wonder if you could just create a "deserializeJSON() method once and reuse it rather than creating a new one each time.

Reply to this Comment

@Andy,

As far as speed, I would assume that going the Function() route is going to be slower than just going straight to eval() simply because there's probably overhead in creating the resultant function.

I think jQuery, under the hood, will try to the native JSON object it is available, or default to eval() or something - so, the other obvious benefit to abstraction is that you can have a centralized point of branch-logic.

Reply to this Comment

@Andy,

Hmmm, I don't know. I've never actually looked at their evaluation technique; but, I thought I had read something about it leveraging the internal JSON object in the new browsers.

Reply to this Comment

I feel bad about posting links from ASP.NET, but anyway this performance test is quite interesting. It's about the performance between eval(), a new function and the native support of common browsers. http://bit.ly/92Fl5

Reply to this Comment

@Brian,

I might be very ignorant here, but I get very suspect of all the hoopla people have over the eval() / hacker stuff. It's one thing when people have an issue with AJAX-driven data; but, a lot of people get in a huff about the use of eval() to strictly internal usage.

Reply to this Comment

I'm not really sure how big a problem it is. I read about it all the time.
I follow the "best practice" guidelines whenever I find them for whatever programming languages I'm using, but is that enough to protect my apps/websites? I hope so. It's not like I'm leaving out a "Welcome Hacker" mat on my virtual front porch. But those guys can be pretty persistent in finding vulnerabilities and exploiting them.

Aside: How about posting some of YOUR Best Practices for ColdFusion or JQuery or anything really?

Reply to this Comment

@Brian,

MY best practices?? Hmm, that's an interesting question. I'll do some thinking and see if I can formalize some stuff.

Reply to this Comment

the most brilliant idea i've ever seen. i tested with ASP.NET JavaScriptSerializer class and it worked. thank you.

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.