Send javascript Object through $.ajax

Question

I want to send a javascript object like this one through a $.ajax request :

 var o = {
   a: 1, 
   b: 'dummy string', 
   c: ['a', 1, {}], 
   d: {dd: 1}, 
   e: new Date(), 
   f: function() {
        console.log('here');
   }
}

I know that i normally should use JSON.stringify before sending it to my php script. The problem is JSON.stringify, removes the properties it can't stringify :

JSON.stringify(o);

returns this ->

"{
  "a":1,
  "b":"dummy string",
  "c":["a",1,{}],
  "d":{"dd":1},
  "e":"2015-11-13T21:34:36.667Z"
}"

But what shoud i do, if i want to store in a mysql column the "o" javascript object as plain text like this :

o = {
   a: 1, 
   b: 'dummy string', 
   c: ['a', 1, {}], 
   d: {dd: 1}, 
   e: new Date(), 
   f: function() {
        console.log('here');
   }
}

What is the PHP script going to do with a Javascript function? — Barmar
– Barmar, Commented Nov 13, 2015 at 21:58
You may be able to use the replacer function argument of JSON.stringify() to encode the parameters that it natively would strip out if for some reason you actually need to keep them. — War10ck
– War10ck, Commented Nov 13, 2015 at 21:58
@MartinVseticka Because i want to store the javascript code as plain text. — wawawoom
– wawawoom, Commented Nov 13, 2015 at 22:01
@wawawoom Yes, in that case I would have the snippet in a textrea most likely and I would just store the text.. — MartyIX
– MartyIX, Commented Nov 13, 2015 at 22:18

AtheistP3ace · Accepted Answer · 2015-11-13 22:02:40Z

3

You could try this:

var o = {
   a: 1, 
   b: 'dummy string', 
   c: ['a', 1, {}], 
   d: {dd: 1}, 
   e: new Date(), 
   f: function() {
        console.log('here');
   }
};

o.f = o.f.toString();
var stringy = JSON.stringify(o);
document.getElementById('test2').innerHTML = stringy;

Fiddle: http://jsfiddle.net/e2cxandt/

Obviously this needs to be changed a bit so you aren't overwriting the function by maybe cloning the object but as a quick example you can see it now has the property in the string.

As someone mentioned in the comments above, war10ck, here is an example of using the replacer argument of JSON.stringify

var o = {
   a: 1, 
   b: 'dummy string', 
   c: ['a', 1, {}], 
   d: {dd: 1}, 
   e: new Date(), 
   f: function() {
        console.log('here');
   }
};

function replacer (key, value) {
  if (typeof value === "function") {
    return value.toString();
  }
  return value;
}

var stringy2 = JSON.stringify(o, replacer);
document.getElementById('test2').innerHTML = stringy2;

Fiddle: http://jsfiddle.net/e2cxandt/1/

edited Nov 13, 2015 at 22:02

answered Nov 13, 2015 at 21:56

AtheistP3ace

9,74112 gold badges45 silver badges43 bronze badges

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

6 Comments

wawawoom Over a year ago

Thanks, actually i've been working with a plugin called JSONfn (github.com/vkiryukhin/jsonfn), and it do the job, but i wanted to know if there was another solution

AtheistP3ace Over a year ago

Cool, no problem! There may be other ways, this is just one way.

wawawoom Over a year ago

More generally do you think it's possible to send the object WITHOUT stringify it ?

user400654 Over a year ago

@wawawoom no, that's not possible, it has to be a string to be sent via http.

AtheistP3ace Over a year ago

Without doing stringify on object as a whole or without doing toString on the function property? I don't believe you can do it without making the entire object a string, as for handling the property thats a function, there could be other ways I am not aware of.

|

dandavis · Accepted Answer · 2015-11-13 22:10:57Z

1

a couple universal (non-specific-instance) options:

you can define a custon toJSON on any object:

Function.prototype.toJSON=function(){return String(this);}; 

JSON.stringify({a:1, b:function(){alert(123)}});

which shows:

{"a":1,"b":"function (){alert(123)}"}

the one caveat is that your function literal is quoted as a string and no longer a function. to fix that if needed, you can use a reviver parameter to JSON.parse().

a better option: using a replace arg to JSON.stringify():

JSON.stringify({a:1, b:function(){alert(123)}}, function(k,v){
  if(typeof v==="function") return String(v);
  return v;
});

which shows:

{"a":1,"b":"function (){alert(123)}"}

that way is particularly nice because you need not modify an built-in or instance objects.

edited Nov 13, 2015 at 22:10

answered Nov 13, 2015 at 22:03

dandavis

16.8k5 gold badges43 silver badges38 bronze badges

2 Comments

Barmar Over a year ago

Modifying the prototypes of built-in types is generally a bad idea.

dandavis Over a year ago

i agree 100%, this is a simple demo. you can define .toJSON() as an own property on a function instance, or do some fancy ES15 subclassing, or just turn it into a string on the object before stringifying.

Collectives™ on Stack Overflow

Send javascript Object through $.ajax

2 Answers 2

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related