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

Posted December 10, 2009 at 2:38 PM by Ben Nadel

Tags: Javascript / DHTML

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.




Reader Comments

Dec 10, 2009 at 4:25 PM // reply »
92 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.


Dec 10, 2009 at 4:31 PM // reply »
11,238 Comments

@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.


Dec 10, 2009 at 4:31 PM // reply »
92 Comments

Doesn't appear to work that way. Must be something special in the constructor.


Dec 10, 2009 at 4:36 PM // reply »
11,238 Comments

@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.


Dec 11, 2009 at 5:08 AM // reply »
12 Comments

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


Dec 11, 2009 at 7:38 AM // reply »
11,238 Comments

@Roman,

No worries about .NET ;) It's still good results. Thanks for posting it.


Dec 11, 2009 at 10:51 AM // reply »
40 Comments

This sounds a bit sketchy. Could a hacker not use this to return a malicious script as JSON data?


Dec 11, 2009 at 10:52 AM // reply »
11,238 Comments

@Brian,

No more so than with the use of an eval() statement.


Dec 11, 2009 at 10:53 AM // reply »
40 Comments

Something else to watch for as I learn AJAX then.


Dec 11, 2009 at 10:56 AM // reply »
11,238 Comments

@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.


Dec 11, 2009 at 11:04 AM // reply »
40 Comments

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?


Dec 11, 2009 at 12:35 PM // reply »
11,238 Comments

@Brian,

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


Feb 16, 2010 at 6:36 PM // reply »
1 Comments

Thanks for this article, very helpful.


Feb 17, 2010 at 5:04 PM // reply »
11,238 Comments

@Danny,

Glad you found it useful.


Jun 20, 2011 at 12:59 PM // reply »
1 Comments

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



Post A Comment

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.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
May 17, 2013 at 7:42 PM
HashKeyCopier - An AngularJS Utility Class For Merging Cached And Live Data
Ben - thanks so much for posting these Angular articles and findings, they've been a huge help towards learning one of the more 'complex' JavaScript frameworks out there (IMO). I have been using Angu ... read »
May 16, 2013 at 5:01 PM
UPDATE: Parsing CSV Data Files In ColdFusion With csvToArray()
Your code was the closest thing I've found to obtaining some direction for converting ISO fields to values that CF can translate properly. Thank you for posting! ... read »
May 15, 2013 at 10:37 PM
Very Simple Pusher And ColdFusion Powered Chat
hi id making plz easy ... read »
May 15, 2013 at 6:07 PM
Making SOAP Web Service Requests With ColdFusion And CFHTTP
Ben, you once again saved my bacon at work. Thank you, thank you, thank you! ... read »
May 15, 2013 at 4:15 PM
What If All User Interface (UI) Data Came In Reports?
@Josh, Thanks! @Ben, I definitely recommend the David West book "Object Thinking" I've been quoting from. It goes deeply into the philosophy and history of OO programming. His breadth ... read »
May 15, 2013 at 11:36 AM
Ask Ben: Print Part Of A Web Page With jQuery
I found this helpfull when you need to keep (refresh) the original parent page after closing the iframe child print dialog (Hoping you're not using a form at this time so it won't submit again): On ... read »
May 14, 2013 at 7:13 PM
What If All User Interface (UI) Data Came In Reports?
@Jonah, If there's any books you'd recommend on the subject of domain modelling, I'd love to hear it. I just downloaded the free PDF of "Domain Driven Design Quickly". Figured I'd give it ... read »
May 14, 2013 at 6:57 PM
The UX Of Prototyping: Low-Fidelity Is The New High-Fidelity
@Phillip, I'm not sure I follow what you mean? Are you saying that you looked at the list of widgets provided by the jQuery UI and let that be your style guide? ... read »
InVision App - Prototyping Made Beautiful With Prototyping Tools