Can you identify the issue with this particular JSON parsing function's reviver?

Question

Can you identify the issue with this particular JSON parsing function's reviver?

I am trying to parse a JSON string with a reviver function to only include specific properties. Here is my code snippet:

const whitelist = ['prop1', 'prop2', 'result'];
const reviver = (key, value) => {
  if (whitelist.includes(key)) {
    return value;
  } else {
    return undefined;
  }
};

const theMightyJsonString = '{ "result": { "prop1": "Greetings", "prop2": "Hello", "prop3": "WASSUP!!!!" } }';

console.log(JSON.parse(theMightyJsonString))
console.log(JSON.parse(theMightyJsonString, reviver))

Although I can successfully parse the JSON string using JSON.parse(theMightyJsonString), the result is undefined when using

JSON.parse(theMightyJsonString, reviver)

. What could be causing this issue?

javascript json

Answer 1

Answer №1

When the last call to reviver occurs, it will have an empty string as the key "". This enables you to apply a transformation to the final object, such as turning it into undefined. By adding a test for the empty string, the functionality works as expected:

const whitelist = ['prop1', 'prop2', 'result'];
const reviver = (key, value) => {
  if (whitelist.includes(key) || key === '') {
    return value;
  } else {
    return undefined; // explicitly delete the entry
  }
};

const theMightyJsonString = '{ "result": { "prop1": "Greetings", "prop2": "Hello", "prop3": "WASSUP!!!!" } }';

console.log( JSON.parse( theMightyJsonString, reviver ) );

Answer 2

When the last call to reviver occurs, it will have an empty string as the key "". This enables you to apply a transformation to the final object, such as turning it into undefined. By adding a test for the empty string, the functionality works as expected:

const whitelist = ['prop1', 'prop2', 'result'];
const reviver = (key, value) => {
  if (whitelist.includes(key) || key === '') {
    return value;
  } else {
    return undefined; // explicitly delete the entry
  }
};

const theMightyJsonString = '{ "result": { "prop1": "Greetings", "prop2": "Hello", "prop3": "WASSUP!!!!" } }';

console.log( JSON.parse( theMightyJsonString, reviver ) );

Answer 3

Answer №2

The explanation on how JSON.parse() works states:

When a reviver is utilized, the parsed value is transformed before being returned. This transformation applies to the computed value and all its properties, starting from the deepest nested properties to the original value itself.

The phrase "and proceeding to the original value itself" addresses your query. The reviver function in JSON.parse() iterates through the keys 'prop1', 'prop2', 'prop3' along with their corresponding values, then moves on to the key 'result' and its value (an object), and finally processes an empty string as a key and the entire parsed object as the value.

The documentation also offers a solution to your issue:

If the reviver selectively transforms values and leaves others untouched, make sure to return all unaltered values as-is, or else they will be omitted from the final object.

Your code should be structured as follows:

const whitelist = ['prop1', 'prop2', 'result'];
const reviver = (key, value) => {

  if (key === '' || whitelist.includes(key)) {
    return value;
  } else {
    return undefined; // delete the key explicitly
  }
};

const theMightyJsonString = '{ "result": { "prop1": "Greetings", "prop2": "Hello", "prop3": "WASSUP!!!!" } }';

console.log(JSON.parse(theMightyJsonString))
console.log(JSON.parse(theMightyJsonString, reviver))

Answer 4

The explanation on how JSON.parse() works states:

When a reviver is utilized, the parsed value is transformed before being returned. This transformation applies to the computed value and all its properties, starting from the deepest nested properties to the original value itself.

The phrase "and proceeding to the original value itself" addresses your query. The reviver function in JSON.parse() iterates through the keys 'prop1', 'prop2', 'prop3' along with their corresponding values, then moves on to the key 'result' and its value (an object), and finally processes an empty string as a key and the entire parsed object as the value.

The documentation also offers a solution to your issue:

If the reviver selectively transforms values and leaves others untouched, make sure to return all unaltered values as-is, or else they will be omitted from the final object.

Your code should be structured as follows:

const whitelist = ['prop1', 'prop2', 'result'];
const reviver = (key, value) => {

  if (key === '' || whitelist.includes(key)) {
    return value;
  } else {
    return undefined; // delete the key explicitly
  }
};

const theMightyJsonString = '{ "result": { "prop1": "Greetings", "prop2": "Hello", "prop3": "WASSUP!!!!" } }';

console.log(JSON.parse(theMightyJsonString))
console.log(JSON.parse(theMightyJsonString, reviver))

Can you identify the issue with this particular JSON parsing function's reviver?

Answer №1

Answer №2

Similar questions

Using PHP to send a JSON request via cURL

Allow for the ability to choose a specific option for every individual line that is echoed in

Updating a particular element within nested arrays: best practices

Increase the size of a centered image within a table

I will not be accessing the function inside the .on("click") event handler

Error functions in Angular HTTP Interceptor are not being triggered

What could be preventing the program from successfully navigating through my @override class?

Encountered an unexpected comma token while attempting to map an array in ReactJS

In Internet Explorer 11, the input event in VueJS may not be triggered upon the first input

Discovering the point of exit for a mouse from an image

Requires a minimum of two page refreshes to successfully load

Encountering an error message saying "assignment to undeclared variable"

Combining JSON-RPC with Swagger for enhanced API documentation and

Preserve data on page even after refreshing in Angular

Getting specific data from JSON Path extractor with a condition

An issue arises when attempting to utilize the 'push()' method to append a string to a JSON array

Cannot create an instance of 'JSON' using the provided arguments: '(Response<AnyObject, NSError>)' in Swift

What is the best way to choose an HTML element in React?

Issue with disabling elements using jQuery in IE 10

Using keys dynamically fetched from a JSON array file to enhance d3js functionality