Converting between JSON and JavaScript objects
In JavaScript programming, JSON (JavaScript Object Notation) is a simple lightweight web data-interchange format or method. In JavaScript, JSON is commonly used to exchange data information between a web server and a web application. While JSON and JavaScript objects have similar concepts, JSON and JavaScript are not exactly the same, so JSON is used to communicate or transfer with JavaScript.
In JavaScript programming, JSON provides built-in methods to transfer data and information from a string to a JavaScript object and vice versa.
These are some popular JSON string to JavaScript object transfer methods.
- JSON.parse() – This function converts a JSON string to a JavaScript object.
- JSON.stringify() – A function converts a JavaScript object to a JSON string.
Converting a JSON string to a JavaScript object using the JSON.parse() function in JavaScript.
In JavaScript programming, the JSON.parse() method is used to parse a JSON string and convert it to a JavaScript object.
Example of the JSON.parse() function.
// here we declare A JSON string data typically retrieved from an API
const jsonString = ‘{“empname”: “Harry”, “empage”: 40, “empcity”: “delhi”}’;
// here it Convert the JSON string to a JavaScript object format
const jsObject = JSON.parse(jsonString);
// here we can can access the json object and display properties
console.log(jsObject.empname); // Result – Harry
console.log(jsObject.empage); // Result – 40
console.log(jsObject.empcity); // Result – delhi
Explanation of the JSON.parse() function.
In this program example, the JSON.parse() function takes a valid JSON string as input and converts it to a JavaScript object.
The resulting jsObject can be used in any of the common JavaScript object formats, where programmers can access its properties by applying dot notation or bracket notation.
Converting a JavaScript object to a JSON string by applying JSON.stringify() in JavaScript.
In JavaScript programming, the JSON.stringify() method is used to convert a JavaScript object into a JSON string, which can then be sent over the network, or stored in text format, e.g., local storage.
Example of converting a JavaScript object to a JSON string.
// here we create A JavaScript object sample
const employee = {
empname: ‘Amit’,
empage: 21,
empcity: ‘Chennai’
};
// now we Convert the JavaScript object to a JSON string format
const jsonString = JSON.stringify(employee);
// Now here jsonString can be used as a string format, as sending it in an HTTP response or request
console.log(jsonString); // Result is – {“empname”:”Amit”,”empage”:21,”empcity”:”Chennai”}
Explanation of JavaScript object to a JSON string.
Here the JSON.stringify() method converts the JavaScript object to a JSON string.
This string represents a valid JSON format, where it can be displayed on the network, or stored in a local storage location.
Managing nested objects and arrays in JavaScript.
In JavaScript programming, both the JSON.parse() and JSON.stringify() functions are used to manage and control nested objects and arrays.
Example of nested objects and arrays in JavaScript.
// here we create A JavaScript object with nested objects and arrays in both
const groupObject = {
empname: “Siddhi Deora”,
empage:28,
department: [“Information Technology”, “Manufacturing”, “Development”, “Design”],
location: {
street: “abc street”,
city: “mumbai”,
pin: “400001”
}
};
// here we Convert the object to a JSON string format
const jsonString = JSON.stringify(groupObject);
// here we Convert the JSON string back to a JavaScript object format
const parsedObject = JSON.parse(jsonString);
console.log(parsedObject.empname); // Result – Siddhi Deora
console.log(parsedObject.department); // Result – [“Information Technology”, “Manufacturing”, “Development”, “Design”]
console.log(parsedObject.location.street); // Result – abc street
Explanation of nested objects and arrays.
Here in this program JSON.stringify() manages both nested objects like location and array like department and the result format is stored securely in a structure in JSON string format.
Here JSON.parse() function method parses JSON string into fundamental structure and stores it in proper order in a JavaScript object.
Dealing with special cases in JSON.stringify() in JavaScript.
In JavaScript programming, some details are followed while converting objects to JSON string. For example, a function and undefined value cannot be displayed directly in JSON format.
Handling function and undefined in JavaScript Example.
const groupWithFunction = {
empname: “Bhavishi Deora”,
greet: function() { console.log(“Hi”); },
empage: undefined
};
const jsonString = JSON.stringify(groupWithFunction);
console.log(jsonString); // Result – {“empname”:”Bhavishi Deora”}
Explanation of handling function and undefined.
- Function – In this program, functions are not added to the JSON output.
- undefined – If undefined is a property value, then it is excluded from the result JSON string.
Here programmers can customize the stringification process by using a replacer function in the JSON.stringify() function to control which program properties are added or excluded.
Customizing JSON Output with JSON.stringify() in JavaScript.
JavaScript programmers can pass a replacer function as the second argument to the JSON.stringify() function to add or modify the object’s properties in the selected format.
Using replacer function in JavaScript Example.
const employee = {
empname: “Harry”,
empage: 23,
security: “pass123!”
};
// here we use Replacer function to exclude security
const jsonString = JSON.stringify(employee, (key, value) => {
if (key === “security”) {
return undefined; // here it Exclude the security property from the JSON string
}
return value; // here it Return the value as is for other properties
});
console.log(jsonString); // Result – {“empname”:”Harry”,”empage”:23,”security”:”pass123!”}
Explanation of replacer function.
Here replacer function allows programmer to exclude security from JSON string in conditional format like this condition.
Where can be called for every key-value pair in the object, and you can decide whether to return value or to exclude undefined properties.
JSON formatting with indentation in JavaScript.
When converting a JavaScript object to a JSON string in a JavaScript program, programmers can format the output with indentation to make it more readable. Here programmers can pass an optional third argument to the JSON.stringify() method to indicate the number of empty spaces to use for indentation.
Pretty-printedJSON example in JavaScript.
const employee = {
empname: “Lalita”,
empage: 40,
cont: 9414,
city: “Rajasthan”
};
// here it use to Convert to a pretty-printed JSON string with indentation format
const jsonString = JSON.stringify(employee, null, 2);
console.log(jsonString);
/*
Result
{
“empname”: “Lalita”,
“empage”: 40,
“cont”: 9414,
“city”: “Rajasthan”
}
*/
Explanation of pretty-printedJSON.
The third argument (2 in this condition) indicates the number of empty spaces for indentation, which makes the program output easier to read.
Common errors in JavaScript JSON.
Circular References If an object has circular references, e.g., an object that references itself in the program, the JSON.stringify() function will generate an error. To manage circular references, programmers can use a library like flattened, or create a custom replacer function to break the cycle.
Example of circular reference problem in JavaScript.
const objvalue = {};
objvalue.self = objvalue; // here we create a Circular reference
try {
const jsonString = JSON.stringify(objvalue); // here this function will throw an error
} catch (p) {
console.error(“Display Error”, p); // here it display TypeError with Converting circular structure to JSON object
}
JSON (JavaScript Object Notation) Summary in JavaScript Programming.
- JSON.parse() in JavaScript Programming – Converts a JSON string to a JavaScript object. Use JSON.parse() when a programmer needs to work with data received in JSON format from an API or other string sources.
- JSON.stringify() in JavaScript – Converts an object in JavaScript to a JSON string. Use this method when a programmer needs to send data over a network, save it to local storage, or display it in an output format as text.
