Call JSON.stringify() with Replacer Function

What is a replacer function that you can provide the JSON.stringify() function call?

✍: FYIcenter.com

The replacer function is an event handler function that is called repeatedly whenever a value, an array element or an object property is stringified during the execution of the JSON.stringify() function.

The replacer function must defined with the following signature:

function any_name(key,value) {
   ...
   return some_value | undefined;  
}

When a value, an array element or an object property is stringified, the replacer function will be called to let you control how the value, the element or the property should be processed:

1. When an object property is processed, the replacer function will be called with "key" argument set to the property name and the "value" argument set to the property value. The object itself can be referred as "this".

If a value is returned, it will be used to replace the property value. If "undefined" returned, this property will be dropped from the Object.

2. When an array element is processed, the replacer function will be called with "key" argument set to the index of the element and the "value" argument set to element value. The array itself can be referred as "this".

If a value is returned, it will be used to replace the element value. If "undefined" returned, this element will be dropped from the Array.

3. When a standalone value, the top level value, is processed, the replacer function will be called with "key" argument set to null and the "value" argument set to the value. The value itself can be referred as "this".

If a value is returned, it will be used to replace the old value. If "undefined" returned, this value will be dropped from the output.

Here is a JavaScript code, JSON-parse-replacer.html, that uses a replacer function to trace the stringifing process of the JSON.stringify() call:

<!-- JSON-stringify-replacer.html
     Copyright (c) FYIcenter.com 
-->
<html>
<body>
<script type="text/javascript">

function tracer(key,value) {
    document.write("parent type-> key, type: value = "
       +(Object.prototype.toString.call(this))+"-> "+key+", "
       +(Object.prototype.toString.call(value))+": "+value+"\n");
    return value;
}

function stringifier(val) {
   var str = JSON.stringify(val,tracer);
   document.write("str = "+str+"\n");
}

   document.write("<p>JSON.stringify() Tracing Replacer:</p>");
   document.write("<pre>");
   val = JSON.parse('["Hello", 3.14, true, ["Jay",25], {"name": "Joe", "age": null}]');
   stringifier(val);
   document.write("</pre>");

</script>
</body>
</html>

Open the above code in a Web browser. You see the following output:

parent type-> key, type: value = [object Object]-> , [object Array]: Hello,3.14,true,Jay,25,[object Object]
parent type-> key, type: value = [object Array]-> 0, [object String]: Hello
parent type-> key, type: value = [object Array]-> 1, [object Number]: 3.14
parent type-> key, type: value = [object Array]-> 2, [object Boolean]: true
parent type-> key, type: value = [object Array]-> 3, [object Array]: Jay,25
parent type-> key, type: value = [object Array]-> 0, [object String]: Jay
parent type-> key, type: value = [object Array]-> 1, [object Number]: 25
parent type-> key, type: value = [object Array]-> 4, [object Object]: [object Object]
parent type-> key, type: value = [object Object]-> name, [object String]: Joe
parent type-> key, type: value = [object Object]-> age, [object Null]: null
str = ["Hello",3.14,true,["Jay",25],{"name":"Joe","age":null}]

â‡’Using JSON in JavaScript

â‡’â‡’JSON Tutorials

2017-09-08, 1955👍, 0💬