Call JSON.parse() with Reviver Function

Q

What is a reviver function that you can provide the JSON.parse() function call?

✍: FYIcenter.com

A

The reviver function is an event handler function that is called repeatedly whenever a JSON element is parsed during the execution of the JSON.parse() function.

The reviver function must defined with the following signature:

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

When a JSON element is parsed, the reviver function will be called to let you control how the element should be processed depending the type of the JSON elements:

1. If the element is a pair of JSON String and JSON Value in a JSON Object, the reviver function will be called with "key" argument set to the JSON String and the "value" argument set to the JSON Value. The JSON Object where this element is located can be referred as "this".

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

2. If the element is a JSON Value in a JSON Array, the reviver function will be called with "key" argument set to the index of the element and the "value" argument set to the JSON Value. The JSON Array where this element is located can be referred as "this".

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

3. If the element is a standalone JSON Value, the top level element, the reviver function will be called with "key" argument set to null and the "value" argument set to the JSON Value. The final return object can be referred as "this".

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

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

<!-- JSON-parse-reviver.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 parser(str) {
   document.write("\njson = "+str+"\n");
   var val = JSON.parse(str,tracer);
   document.write("val.toString() = "+val.toString()+"\n");
}

   document.write("JSON.parse() Tracing Reviver:");
   document.write("");
   parser('["Hello", 3.14, true, ["Jay",25], {"name": "Joe", "age": null}]');
   document.write("");
</script>
</body>
</html>

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

JSON.parse() Tracing Reviver:

json = ["Hello", 3.14, true, ["Jay",25], {"name": "Joe", "age": null}]
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]-> 0, [object String]: Jay
parent type-> key, type: value = [object Array]-> 1, [object Number]: 25
parent type-> key, type: value = [object Array]-> 3, [object Array]: Jay,25
parent type-> key, type: value = [object Object]-> name, [object String]: Joe
parent type-> key, type: value = [object Object]-> age, [object Null]: null
parent type-> key, type: value = [object Array]-> 4, [object Object]: [object Object]
parent type-> key, type: value = [object Object]-> , [object Array]: Hello,3.14,true,Jay,25,[object Object]
val.toString() = Hello,3.14,true,Jay,25,[object Object]

⇒ JSON-parse-Transformed.html - JSON.parse() Value Transformed

⇐ JSON-parse-Error.html - JSON.parse() Errors

⇑ Using JSON in JavaScript

⇑⇑ JSON Tutorials

2023-09-07, 2045🔥, 0💬