Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to deserialize a JSON into Javascript object?
Serialization is the process of converting an object such that it is transferable over the network. In JavaScript usually we serialize an Object into the JSON (JavaScript Object Notation) format.
To deserialize a JSON string back into a JavaScript object, we use the JSON.parse() method. This method takes a JSON string and converts it into a JavaScript object or array that we can work with in our code.
JavaScript object notation is commonly used to exchange data with web servers and REST APIs. The data we receive from a web server is always a string. To use this data in our JavaScript code, we need to parse it with JSON.parse(), which returns a JavaScript object or array.
Syntax
JSON.parse(text, reviver)
Parameters:
- text - The JSON string to parse
- reviver (optional) - A function that transforms the results
Return Value: Returns a JavaScript object, array, or value corresponding to the given JSON text.
Example 1: Parsing a JSON Object
In this example, we parse a JSON string containing an object with properties:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
var text = '{"name":"Aman Kumar","Company":"TutorialsPoint", "city":"Hyderabad"}';
var obj = JSON.parse(text);
document.write("Parsed object: " + JSON.stringify(obj));
document.write("<br>Name: " + obj.name);
document.write("<br>Company: " + obj.Company);
</script>
</body>
</html>
Example 2: Accessing Object Properties
After parsing, we can access individual properties of the resulting JavaScript object:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p id="demo"></p>
<script>
var obj = JSON.parse(
'{"name":"Aman Kumar","Company":"TutorialsPoint", "city":"Hyderabad"}'
);
document.getElementById("demo").innerHTML =
obj.name + " works at " + obj.Company + " in " + obj.city;
</script>
</body>
</html>
Example 3: Parsing a JSON Array
JSON arrays are parsed into JavaScript arrays that we can iterate over or access by index:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h2>Parsing a JSON Array</h2>
<p>JSON array will be parsed into a JavaScript array.</p>
<p id="demo"></p>
<script>
const text = '["Tutorial", "Point", "Telangana", "Hyderabad"]';
const JSArr = JSON.parse(text);
document.getElementById("demo").innerHTML = "Array elements: " + JSArr.join(", ");
document.write("<br>First element: " + JSArr[0]);
document.write("<br>Array length: " + JSArr.length);
</script>
</body>
</html>
Example 4: Complex JSON Object
Here's an example with different data types including boolean and number values:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
const json = '{"result":true, "count":42, "message":"Success"}';
// Parse the JSON string
const obj = JSON.parse(json);
document.write("Count: " + obj.count + "<br>");
document.write("Result: " + obj.result + "<br>");
document.write("Message: " + obj.message);
</script>
</body>
</html>
Error Handling
Always wrap JSON.parse() in a try-catch block when parsing untrusted JSON strings:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
const invalidJson = '{"name": "John", "age":}'; // Invalid JSON
try {
const obj = JSON.parse(invalidJson);
document.write("Parsed successfully: " + obj.name);
} catch (error) {
document.write("Error parsing JSON: " + error.message);
}
</script>
</body>
</html>
Key Points
-
JSON.parse()converts JSON strings to JavaScript objects/arrays - The input must be valid JSON format
- Always handle potential parsing errors with try-catch
- The parsed result maintains the original data types (string, number, boolean, null)
Conclusion
JSON.parse() is essential for working with JSON data in JavaScript. It safely converts JSON strings from APIs or storage into usable JavaScript objects, enabling you to access and manipulate the data in your applications.
3K+ Views
