JSON.parse()

❮ Previous Next ❯

JSON is often used to send and receive data between a website and a server.

When you get information from a web server, it's always in the form of text.

To change data into a JavaScript object, use JSON.parse().

Example - Parsing JSON

Let's say we got this message from a website server:

'{"name":"John", "age":30, "city":"New York"}'

Use the JavaScript function JSON.parse() for transforming text into a JavaScript object.

const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

Ensure that the text follows JSON format; otherwise, it may result in a syntax error.

Include the JavaScript object on your webpage.

Array as JSON

If you use JSON.parse() on JSON that comes from an array, it gives back a JavaScript array, not a JavaScript object.

Exceptions

Parsing Dates

JSON does not permit the use of date objects.

If you want to add a date, just write it as a group of letters.

You can change it back to a date object afterward.

Alternatively, you have the option to utilize the second parameter in the JSON.parse() function, known as reviver.

The reviver parameter is a function that examines each property before providing the final value.

Parsing Functions

In JSON, you can't use functions.

If you want to add a function, type it out as a string.

You can change it back into a function afterwards.

It's better not to use functions in JSON because they lose their scope. If you do use them, you might need to use eval() to turn them back into functions.

<!DOCTYPE html>
<html>
  <body>
    <h2>Creating an Object from a JSON String</h2>
    <p id="demo"></p>
    <script>
      const txt = '{"name":"John", "age":30, "city":"New York"}'
      const obj = JSON.parse(txt);
      document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Parsing a JSON Array.</h2>
    <p>Data written in a JSON array will be converted into a JavaScript array.</p>
    <p id="demo"></p>
    <script>
      const text = '[ "Ford", "BMW", "Audi", "Fiat" ]';
      const myArr = JSON.parse(text);
      document.getElementById("demo").innerHTML = myArr[0];
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Convert a string into a date object.</h2>
    <p id="demo"></p>
    <script>
      const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
      const obj = JSON.parse(text);
      obj.birth = new Date(obj.birth);
      document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Convert a string into a date object.</h2>
    <p id="demo"></p>
    <script>
      const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}';
      const obj = JSON.parse(text, function(key, value) {
        if (key == "birth") {
          return new Date(value);
        } else {
          return value;
        }
      });
      document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Convert a string into a function.</h2>
    <p id="demo"></p>
    <script>
      const text = '{"name":"John", "age":"function() {return 30;}", "city":"New York"}';
      const obj = JSON.parse(text);
      obj.age = eval("(" + obj.age + ")");
      document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

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