Using JSON.stringify() and JSON.parse()
In JavaScript programming, the JSON.stringify() and JSON.parse() function methods are popular methods for converting and communicating with the JSON data type. JSON.stringify() and JSON.parse() allow JavaScript programmers to convert data and information between JavaScript objects and JSON strings, which is essential for communicating with JSON API data or storing and processing data and digital information in string format.
Converting a JavaScript object to a JSON string in JavaScript.
JSON.stringify() function in JavaScript.
In JavaScript programming, the JSON.stringify() function method is used to convert a JavaScript object to a JSON string. Here JSON.stringify() becomes useful when the JavaScript programmer needs to send data in JSON format to an online webpage format, such as an API, or store it in string format in local storage or a secondary database.
Syntax of the JavaScript JSON.stringify() function.
JSON.stringify(value, replacer, space);
The JSON.stringify() function element.
- value – It is the existing JavaScript object that the programmer wants to convert into a JSON string format.
- replacer (optional) – It is a function or array in the program that indicates how to replace the existing values in the string. If it is not available, all properties are included in it.
- space (optional) – A number or string used in indentation to make the program output more readable.
Basic example of JSON.stringify() function.
const employee = {
emp_name: “Rock”,
emp_age: 70,
Address: “India”
};
// here we Convert the JavaScript object into a JSON string format
const jsonString = JSON.stringify(employee);
console.log(jsonString); // Result – {“emp_name”:”Rock”,”emp_age”:70,”Address”:”India”}
JavaScript programming used to convert a JSON string into a JavaScript object.
JSON.parse() function in JavaScript.
In JavaScript programming, the JSON.parse() function method is used to convert a JSON string into a JavaScript object. Here the JSON.parse() function is useful when the JavaScript programmer receives data and information in JSON format from a server or API, and wants to use and task it in JavaScript object format.
Syntax of the JSON.parse() function.
JSON.parse(text, reviver);
JSON.parse() function element.
- text – This is the JSON string in the program that is to be converted into a JavaScript object.
- reviver (optional) – This is a function in the program that can modify the parsed program value before it is returned. If it is provided in the program, all these values are returned in the same order.
Basic example of the JSON.parse() function.
const jsonString = ‘{“emp_name”:”Mathew”,”emp_age”:21, “emp_cont”:9414,” emp_address”:”India”}’;
// here we used t Convert the JSON string into a JavaScript object format
const jsObject = JSON.parse(jsonString);
console.log(jsObject);
// Rsult – { emp_name: ‘Mathew’,emp_age: 21, emp_cont: 9414,’ emp_address’: ‘India’}
Combined use of JSON.stringify() and JSON.parse() in JavaScript.
JavaScript programmers can apply the JSON.stringify() and JSON.parse() function methods in groups to clone objects or create advanced copies of objects. Programmers can use them in a single program as needed, as these methods create a new JavaScript object with equal data but without references.
Example of JSON.stringify() and JSON.parse().
const employee = {
emp_name: “siddhi”,
emp_cont: 28,
emp_address: “united kingdom”
};
// here it we Clone th employee object using JSON program methods
const clonedemployee = JSON.parse(JSON.stringify(employee));
clonedemployee.mcont = 40; // here we Modify the employee contact cloned object
console.log(employee.emp_cont); // Result – 28 is the original object remains unchanged
console.log(clonedemployee.mcont); // Result – 40 here this is a cloned object that we modified
Explanation of JSON.stringify() and JSON.parse().
Here in this program the programmer creates an advanced copy of the employee object by applying JSON.stringify() followed by JSON.parse() function method, it means the modifications made in the clone do not affect the original object.
Formatting JSON output with JSON.stringify() in JavaScript.
JavaScript programmers can use the space parameter of the JSON.stringify() function to format the JSON program output as indentation. This method is more helpful in creating JSON data and information in a human-readable understandable format.
Example of Formatting JSON output with JSON.stringify() in JavaScript.
const employee = {
emp_name: “HHH”,
emp_age: 47,
emp_cont: 9413,
address: “Australia”
};
// here we Convert to a JSON string with 4 space indentation format
const jsonString = JSON.stringify(employee, null, 4);
console.log(jsonString);
/*
Result –
{
“emp_name”: “HHH”,
“emp_age”: 47,
“emp_cont”: 9413,
“address”: “Australia”
}
*/
Explanation of JSON output with JSON.stringify().
Here the second argument null in the employee object means that the programmer does not need a replacer function.
The third argument 4 indicates the numeric value of the space used for indentation.
Use of JSON.stringify() with replacer function in JavaScript.
In JavaScript programming, the replacer parameter in the JSON.stringify() function method can be used to add or remove selective properties from the JSON string. Here it can be in a function or an array format.
Example of JavaScript replacer function.
const employee = {
emp_name: “Eddie”,
emp_age: 49,
address: “Switzerland”,
security: “pass987@”
};
// here we Exclude the security field from the JSON string method
const jsonString = JSON.stringify(employee, (key, value) => {
if (key === “security”) {
return undefined; // here it Exclude security method
}
return value;
});
console.log(jsonString);
// Result – {“emp_name”:”Eddie”,”emp_age”:49,”address”:”Switzerland”}
Explanation of JavaScript replacer function.
Here in this program replacer function receives each key-value pair of JavaScript program object. If there is “security”, the programmer returns an undefined value to exclude it from the JSON string.
Handling circular references in JSON.stringify() in JavaScript.
If a JavaScript program object contains a circular reference, such as a program object that references self, then the JSON.stringify() function method generates an error. This is because JSON cannot represent circular structures in objects.
Example of circular reference error in JavaScript.
const object = {};
obj.self = object; // here we create a Circular reference
try {
const jsonString = JSON.stringify(object);
} catch (error) {
console.error(“Display Error”, error); // here it display error used to Converting circular structure to JSON format
}
Program Solution – To manage circular references in this program, programmers can apply a custom replacer function, or use an existing built-in library like Flattened, which can manage circular structures in programs.
Using JSON.parse() with reviver function in JavaScript.
In JavaScript programming, the reviver parameter in the JSON.parse() function method is a function that can be used to modify the parsed program value before it is returned.
Example of reviver function.
const jsonString = ‘{“emp_name”:”Akshay”,”emp_age”:44,”address”:”mumbai”}’;
// here we used Reviver function to modify the parsed data
const jsObject = JSON.parse(jsonString, (key, count) => {
if (key === “emp_age”) {
return count + 1; // Increase the age by 1
}
return count; // Return the value as-is for other properties
});
console.log(jsObject);
// Result – { emp_name: ‘Akshay’, emp_age: 45, address: ‘mumbai’ }
Explanation of the reviver function.
Here reviver function allows the JavaScript programmer to modify the value while parsing the JSON string into an object. In this condition, the employee’s age is increased by 1 and displayed.
Example of JSON.stringify() and JSON.parse() methods working with API data.
One of the basic use of JSON.stringify() and JSON.parse() function methods in JavaScript programming is to use API. Here the programmer has to stringify the user object while sending data to the API, and while receiving data, the user has to parse the JSON string.
Example of sending and receiving API data in JavaScript.
// here this is a process of send data through API method
const employeeData = {
emp_name: “Vinay”,
address: “delhi”,
email: “vinay121@gmail.com”,
age: 31
};
// here we Convert the JavaScript object to JSON for the API request
const jsonData = JSON.stringify(employeeData);
// it Simulate sending data to an API
fetch(‘https://api.server.com/user’, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’
},
body: jsonData // here it Send the JSON string
})
.then(response => response.json()) // now it Parse the JSON response
.then(data => {
console.log(“Display API response”, data);
})
.catch(error => {
console.error(“Display Error”, error);
});
sending and receiving API data in JavaScript Explanation.
In this program, the emplyeeData object is stringified using the JSON.stringify() function method before sending it in the request body
The response is then parsed using the response.json() function method.
Summary of JSON.stringify() and JSON.parse(), function methods.
- JSON.stringify() – It converts a JavaScript object to a JSON string. It is useful for sending data to the server or storing it locally in string order.
- JSON.parse() – It converts a JSON string to a JavaScript object. It is useful for working with data received from APIs or other sources.
- Replacer function – It allows the user to filter or modify the properties of an object while stringifying it in JavaScript.
- Reiver function – It allows the user to modify the parsed data while converting a JSON string to an object in JavaScript.
- Circular references – The JSON.stringify() function method does not support circular references in JavaScript programs, here the user needs custom handling.
