How to do JSON Serialization in Javascript

JSON.stringify()

The JSON.stringify() method accepts two arguments in addition to the object to serialize.

The first argument is a filter, which can be either an array or a function. The second argument is an option for indenting the resulting JSON string.

If the argument is an array, JSON.stringify() includes only object properties that are listed in the array.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var book = { 
            "title": "JavaScript",
            "authors": ["J" ], 
             edition: 3, <!-- ww  w .j ava 2  s .c  o  m-->
             year: 2011 
        }; 
        
        var jsonText = JSON.stringify(book, ["title", "edition"]); 
        document.writeln(jsonText);
    </script>

</head>
<body>
  
</body>
</html>

Click to view the demo

Example

When the second argument is a function. The provided function receives two arguments: the property key name and the property value.

You can look at the key to determine what to do with the property. The key may be an empty string if a value isn't part of a key-value pair.

The undefined property is omitted from the result in the JSON.stringify method.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        var book = {
         "title": "JavaScript",
         "authors": ["J"], 
          edition: 3, <!--from w  w  w  . j ava2 s . c  o m-->
          year: 2011 
        }; 
        
        var jsonText = JSON.stringify(book, function(key, value){ 
            switch(key){ 
               case "authors": 
                  return value.join(",")
               case "year": 
                  return 2012;
               case "edition": 
                  return undefined;
               default: 
               return value; 
            } 
        }); 
        document.writeln(jsonText);
    </script>

</head>
<body>
  
</body>
</html>

Click to view the demo

String Indentation

The third argument of JSON.stringify() controls indentation and white space. When this argument is a number, it represents the number of spaces to indent each level.

The following code indents each level by four spaces:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
            var book = {
             "title": "JavaScript",
             "authors": [ "J" ], 
              edition: 3, <!--from w w  w .  j a v  a 2s.  co  m-->
              year: 2011 
            }; 
            
            var jsonText = JSON.stringify(book, null, 4); 
            document.writeln("<pre>"+jsonText+"</pre>");
    </script>

</head>
<body>
  
</body>
</html>

Click to view the demo

Indent with string value

If the indentation argument is a string, the string is used as the indentation character for the JSON string instead of a space.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
            var book = {
             "title": "JavaScript",
             "authors": [ "J" ], 
              edition: 3, <!--  w  w  w. jav a 2s.  co  m-->
              year: 2011 
            }; 
            
            
            var jsonText = JSON.stringify(book, null, " - -"); 
            document.writeln("<pre>"+jsonText+"</pre>");
    </script>
</head>
<body>
</body>
</html>

Click to view the demo

toJSON() Method

You can add a toJSON() method to the object and have it return the proper JSON representation. The native Date object has a toJSON() method that converts JavaScript Date objects into an ISO 8601 date string.

A toJSON() method can be added to any object, for example:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
            var book = { 
                "title": "JavaScript",
                "authors": ["J"],
                 edition: 3,<!--  w w w  . j  a  va 2 s. c o  m-->
                 year: 2011,
                 toJSON: function(){ 
                    return this.title; 
                 }
            }; 
            
            var jsonText = JSON.stringify(book); 
            document.writeln("<pre>"+jsonText+"</pre>");
    </script>

</head>
<body>
  
</body>
</html>

Click to view the demo