JSON

Sometimes, we need to convert an object (an array is an object!) to a plain string, so that its contents can be displayed, compared or copied. In some other times, we want an object to be saved in a file on the disk, stored in the database in the server, transmitted across the network, or used in any other way that requires a string format. JSON.stringify() allows us to serialize an object. To restore the object from the string, use JSON.parse().

JSON stands for JavaScript Object Notation. It is very flexible and can be used to store complex data made up of a deep hierarchy of objects.

RESETRUNFULL

<!DOCTYPE html><html><body><script>


   var o={a:10}, o2={x:5};
   o.b=o2;
   o.c=[o2,o2];
   o.d=new Boolean(true);
   o.e=function(){return 9;};  // a function won’t be stored
   var s = JSON.stringify(o);
   console.log(s);              // {"a":10,"b":{"x":5},"c":[{"x":5},{"x":5}],"d":true}
   var ro = JSON.parse(s);
   console.log(ro.c[1].x); // 5

</script></body><html>

<!DOCTYPE html><html><body><script>


   var o={a:10}, o2={x:5};
   o.b=o2;
   o.c=[o2,o2];
   o.d=new Boolean(true);
   o.e=function(){return 9;};  // a function won’t be stored
   var s = JSON.stringify(o);
   console.log(s);              // {"a":10,"b":{"x":5},"c":[{"x":5},{"x":5}],"d":true}
   var ro = JSON.parse(s);
   console.log(ro.c[1].x); // 5

</script></body><html>

JSON.stringify() may accept a replacer function as its second argument:

RESETRUNFULL

<!DOCTYPE html><html><body><script>

var o = {a:1,b:'hello',c:{d:2,e:'world'}};function replacer(key,value){
   return
  (key==='d')?(value*10)
            :(typeof value === 'string')?undefined:value;                                                 // filtered out completely!}console.log(JSON.stringify(o,replacer));                                                  // {"a":1,"c":{"d":20}}

</script></body><html>

<!DOCTYPE html><html><body><script>

var o = {a:1,b:'hello',c:{d:2,e:'world'}};function replacer(key,value){
   return
  (key==='d')?(value*10)
            :(typeof value === 'string')?undefined:value;                                                 // filtered out completely!}console.log(JSON.stringify(o,replacer));                                                  // {"a":1,"c":{"d":20}}

</script></body><html>

The third argument, when passed to JSON.stringify(), denotes the number of spaces used for each indentation level.

RESETRUNFULL

<!DOCTYPE html><html><body><script>

var o = {a:1,b:'hello',c:{d:2,e:'world'}};console.log(JSON.stringify(o,null,5));     // pretty-printing JSON string/*{
     "a": 1,
     "b": "hello",
     "c": {
          "d": 2,
          "e": "world"
     }}*/

</script></body><html>

<!DOCTYPE html><html><body><script>

var o = {a:1,b:'hello',c:{d:2,e:'world'}};console.log(JSON.stringify(o,null,5));     // pretty-printing JSON string/*{
     "a": 1,
     "b": "hello",
     "c": {
          "d": 2,
          "e": "world"
     }}*/

</script></body><html>

For JSON, property names must be double-quoted strings. Circular references, ie. object properties or array elements pointing to the object or array itself, are not allowed. Functions aren't included into the JSON string naturally. However, there is a workaround, by passing to both JSON.stringify() and JSON.parse() a second argument:

RESETRUNFULL

<!DOCTYPE html><html><body><script>

var o = {a:x=>x};console.log(JSON.stringify(o));  // {}function replacer(key,value){
   return (typeof value === 'function')?
                     "/Function(" + value.toString() + ")/":value;}function reviver(key,value){
   var f = new Function(+value);
   return (typeof value === "string" &&
      value.startsWith("/Function(") && value.endsWith(")/"))?
            eval("("+value.substring(10, value.length - 2)+")")
           :value;}var o2 = JSON.parse(JSON.stringify(o,replacer),reviver);console.log(o2.a(10));  // 10

</script></body><html>

<!DOCTYPE html><html><body><script>

var o = {a:x=>x};console.log(JSON.stringify(o));  // {}function replacer(key,value){
   return (typeof value === 'function')?
                     "/Function(" + value.toString() + ")/":value;}function reviver(key,value){
   var f = new Function(+value);
   return (typeof value === "string" &&
      value.startsWith("/Function(") && value.endsWith(")/"))?
            eval("("+value.substring(10, value.length - 2)+")")
           :value;}var o2 = JSON.parse(JSON.stringify(o,replacer),reviver);console.log(o2.a(10));  // 10

</script></body><html>

(In the past, some established websites such as Google prepend 'while(1);' or tokens like '&&&START&&&' to their private JSON responses to prevent JSON hikacking JSON hikacking JSON hikacking . Modern browsers have solved this problem inherently. )

MENU

JSON