Difference between JSON.stringify() and JSON.parse()

 

Difference between JSON.stringify() and JSON.parse()

FunctionWhat it doesInputOutputWhen to use
JSON.stringify()Converts a JavaScript object/array into a JSON stringObject / ArrayStringWhen sending data to a server or storing it (like in localStorage)
JSON.parse()Converts a JSON string back into a JavaScript object/arrayStringObject / ArrayWhen receiving JSON data from a server or reading stored data

📘 Example


<!DOCTYPE html>
<html>
<head>
    <title>JSON Example</title>
</head>
<body>
    <script>
        // Example Student Object
        var student = {
            name: "Sanjay",
            age: 23,
            className: "10A",
            location: "Delhi"
        };

        console.log("Original Object:", student);

        // 1️⃣ Convert object to JSON string (stringify)
        var jsonString = JSON.stringify(student);
        console.log("After JSON.stringify():", jsonString);
        // Output: {"name":"Sanjay","age":23,"className":"10A","location":"Delhi"}

        // 2️⃣ Convert JSON string back to object (parse)
        var jsonObject = JSON.parse(jsonString);
        console.log("After JSON.parse():", jsonObject);
        // Output: {name: 'Sanjay', age: 23, className: '10A', location: 'Delhi'}

        // ✅ Accessing property after parse
        console.log("Student Name:", jsonObject.name);
    </script>
</body>
</html>



🔎 Explanation Step by Step:

  1. We start with a JavaScript object → {name: "Sanjay", age: 23, ...}

  2. JSON.stringify(student) converts it to a JSON string:

    {"name":"Sanjay","age":23,"className":"10A","location":"Delhi"}

    👉 This is just text — useful for sending across network or storing in DB/localStorage.

  3. JSON.parse(jsonString) converts the string back to an object so we can use it again in code.


⚡ In simple words:

  • stringify() → Object → String (for transport/storage)

  • parse() → String → Object (for use in JS code)

Comments

Popular posts from this blog

Interview Tips: Dot NET Framework vs Net CORE

FREE Webinar: Run Your Own Independent DeepSeek LLM

ORACLE 11g: User Authentication System with Stored Procedure and SQL*Plus Integration