Getting JSON with functions with jQuery

Question

In the root of my .js file I declare:

var Doe = {
            "foo": "The quick brown fox jumps over the lazy dog.",
            "bar": "ABCDEFG",
            "baz": [52, 97],
            "testfunc": function(){alert('json function');}
           }

And in my HTML:

<a id="lele" href="javascript:void(0)" onclick="Doe.testfunc()">Doe</a>

And when I click it it works, so I know it's possible to put functions in JSON objets.

Now, in the root of the .js I declare:

$.getJSON("~/rule/2", function(data) {
    alert("2: " + data.foo);
    data.testfunc();
});

And the server is returning this for that url:

 context.Response.ContentType = "application/json";
 context.Response.Output.Write(@"{
                     ""foo"": ""The quick brown fox jumps over the lazy dog."",
                     ""bar"": ""ABCDEFG"",
                     ""baz"": [52, 97],
                     ""testfunc"": function(){alert('json function');}  
                                 }");
  context.Response.Flush();

But nothing happens :( Aparently because if there is an error, .getJSON will fail silently. But, if I remove the lines regarding of the function:

$.getJSON("~/rule/2", function(data) {
    alert("2: " + data.foo);
});

and

 context.Response.Output.Write(@"{
                     ""foo"": ""The quick brown fox jumps over the lazy dog."",
                     ""bar"": ""ABCDEFG"",
                     ""baz"": [52, 97]}");

Then it works, an alert pop up with the content of the "foo" property.

What is the problem with the function? :( In the moment that I put a function in the JSON object, jQuery fails.

Kind regards.

Glorfindel · Accepted Answer · 2019-08-08 09:21:11Z

6

You don't have a JSON object.

You have an object literal. Functions cannot be values of a JSON string.

JSON is only a subset of the object literal syntax. Possible values are:

_{(source: json.org)}

Read more on json.org

This is JavaScript object:

var foo = {bar: 42}

and this is a JSON string:

var foo = '{"bar": 42}';

See also JavaScript, JSON objects and object literal notation.

Update: In order to return and execute JavaScript, you can do the following:

You can return plain JavaScript e.g.

context.Response.ContentType = "text/javascript";
context.Response.Output.Write(@"
 function testfunc(){
     alert('json function')
 };
 testfunc();
");

and use $.ajax with dataType: 'script':

$.ajax({
    url: "~/rule/2",
    dataType: 'script',
    success: function(data) {}
});

DEMO

You can also define JavaScript objects with functions like so:

context.Response.ContentType = "text/javascript";
context.Response.Output.Write(@"
     var obj = {
         bar: function(){alert(42);}
     }
     yourHandler(obj);
");

You just need to have a global function called yourHandler (and of course still call ajax with dataType: script).

This is probably what comes closest to what you want. The difference is, that you don't return JSON, but JavaScript, and you don't process the object in the success callback, but in another function, which has to be called from within the JS you sent.

See another DEMO

edited Aug 8, 2019 at 9:21

Glorfindel

22.8k13 gold badges97 silver badges124 bronze badges

answered Jan 13, 2011 at 17:59

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vtortola Over a year ago

d'oh! how could i do that then? I mean, download and execute custom JS code form the server? Thanks.

user113716 Over a year ago

Answers with graphics deserve a +1 (and for the rest of the content too, of course). :o)

Vadim · Accepted Answer · 2011-01-13 17:58:30Z

4

No it's not possible to put functions in JSON objects. It's possible to put functions in JavaScript objects though, which is what you've demonstrated in the first snippet.

answered Jan 13, 2011 at 17:58

Vadim

18k5 gold badges41 silver badges62 bronze badges

1 Comment

vtortola Over a year ago

d'oh! how could i do that then? I mean, download and execute custom JS code form the server? Thanks.

user113716 · Accepted Answer · 2011-01-13 18:12:23Z

3

You could place just string representation the function body in your JSON that you're sending, then give that data to the Function constructor.

Example: http://jsfiddle.net/m8PQY/1/

var myJSON = '{"func":"{alert(\'json function\');}"}';

var obj = $.parseJSON( myJSON );

var myFunc = new Function( obj.func );

myFunc();

Obviously you would only want to do this if you are the author of the code you're sending.

answered Jan 13, 2011 at 18:12

user113716

323k64 gold badges454 silver badges441 bronze badges

Collectives™ on Stack Overflow

Getting JSON with functions with jQuery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related