JSON.stringify()

❮ Previous Next ❯

JSON is often used to swap data with a web server.

When you send information to a web server, it needs to be in the form of a string.

Change a JavaScript object into a string using JSON.stringify().

Stringify a JavaScript Object

Think about having this object in JavaScript:

const obj = {name: "John", age: 30, city: "New York"};

Use the JavaScript function JSON.stringify() to change it into a string.

const myJSON = JSON.stringify(obj);

The outcome will be a text structured in JSON format.

The variable myJSON has been converted into a string. It's all set to be sent to a server.

Stringify a JavaScript Array

You can also convert JavaScript arrays into strings.

Think about having this array in JavaScript:

const arr = ["John", "Peter", "Sally", "Jane"];

Use the JavaScript function JSON.stringify() to convert it into a string.

const myJSON = JSON.stringify(arr);

The outcome will be a text structured like JSON.

The variable named myJSON has been converted into a string. It's ready to be sent to a server.

Storing Data

When you save information, it needs to follow a specific structure. No matter where you decide to keep it, using text is always a valid way to format the data.

JSON allows storing JavaScript objects as text.

Exceptions

Stringify Dates

In JSON, you can't have date objects. When you use the JSON.stringify() function, it changes any dates into strings.

You can change the string back into a date object when it reaches the recipient.

Stringify Functions

In JSON, you can't use functions as values for objects.

The function called JSON.stringify() removes any functions from a JavaScript object, including both the key and the value.

You don't have to include this step if you change your functions into text before using the JSON.stringify() function.

When you send functions as JSON, they lose their original context. The receiver then has to use eval() to turn them back into functions.

<!DOCTYPE html>
<html>
  <body>
    <h2>Create a JSON string from a JavaScript object.</h2>
    <p id="demo"></p>
    <script>
      const obj = {
        name: "John",
        age: 30,
        city: "New York"
      };
      const myJSON = JSON.stringify(obj);
      document.getElementById("demo").innerHTML = myJSON;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Create a JSON string from a JavaScript array.</h2>
    <p id="demo"></p>
    <script>
      const arr = ["John", "Peter", "Sally", "Jane"];
      const myJSON = JSON.stringify(arr);
      document.getElementById("demo").innerHTML = myJSON;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Store and retrieve data from local storage.</h2>
    <p id="demo"></p>
    <script>
      // Storing data:
      const myObj = {
        name: "John",
        age: 31,
        city: "New York"
      };
      const myJSON = JSON.stringify(myObj);
      localStorage.setItem("testJSON", myJSON);
      // Retrieving data:
      let text = localStorage.getItem("testJSON");
      let obj = JSON.parse(text);
      document.getElementById("demo").innerHTML = obj.name;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JSON.stringify() converts date objects into strings.</h2>
    <p id="demo"></p>
    <script>
      const obj = {
        name: "John",
        today: new Date(),
        city: "New York"
      };
      const myJSON = JSON.stringify(obj);
      document.getElementById("demo").innerHTML = myJSON;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JSON.stringify() will remove any functions from an object.</h2>
    <p id="demo"></p>
    <script>
      const obj = {
        name: "John",
        age: function() {
          return 30;
        },
        city: "New York"
      };
      const myJSON = JSON.stringify(obj);
      document.getElementById("demo").innerHTML = myJSON;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JSON.stringify() will remove any functions from an object.</h2>
    <p>Change functions to text so they can be stored in a JSON object.</p>
    <p id="demo"></p>
    <script>
      const obj = {
        name: "John",
        age: function() {
          return 30;
        },
        city: "New York"
      };
      obj.age = obj.age.toString();
      const myJSON = JSON.stringify(obj);
      document.getElementById("demo").innerHTML = myJSON;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics