Working with JSON and JavaScript

Last update on August 19 2022 21:50:45 (UTC/GMT +8 hours)

Discription

In this page, you will learn about working with JSON and JavaScript. We have discussed JSON.stringify, JSON.parse with examples.

We have also discussed why you should not use JavaScript eval() while working with JSON.

What is serialize and deserialize

Often you would find these two terms - serialize and deserialize. With the context of working with JavaScript and JSON, in a nutshell, to get JSON value from JavaScript value is serialization and when it's another way (JSON to JavaScript) is deserialization.

JavaScript JSON object

The JavaScript JSON object comprises methods using which you can convert JavaScript values to JSON format and JSON notation to JavaScript values.

We will now discuss two JSON methods - JSON.stringify and JSON.parse with examples.

JSON.stringify

JSON.stringify is used to convert JavaScript values to JSON.

JSON.stringify example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript JSON.stringify example | JSON tutorial | w3resource</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="w3resource();">
<h1>This is an example of JavaScript JSON.stringify</h1>
<script type="text/javascript">
    function w3resource()
     {
    	var w3r = {};
        w3r.PHP = "w3resource PHP tutorial";
        w3r.Examples = 500;
        var w3r_JSON = JSON.stringify(w3r); // w3r_JSON holds {"PHP":"w3resource PHP tutorial","Examples":500}
        alert (w3r_JSON);
     }
</script>
</body>
</html>

Live

JS Bin

View the Example of JavaScript JSON.stringify online.

JSON.parse

JSON.parse is used to convert JSON notation to JavaScript values.

JSON.parse example


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript JSON.parse example | JSON tutorial | w3resource</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="w3resource();">
<h1>This is an example of JavaScript JSON.stringify</h1>
<script type="text/javascript">
        function w3resource()
         {
          var w3r = {};
          w3r.PHP = "w3resource PHP tutorial";
          w3r.Examples = 500;
          var w3r_JSON = JSON.stringify(w3r); // w3r_JSON holds {"PHP":"w3resource PHP tutorial","Examples":500}
          alert(w3r_JSON);
         	var convertToJS = JSON.parse(w3r_JSON);
         	var StringAgain = JSON.stringify(w3r);
         	alert(StringAgain);
         }
  </script>
  </body>
  </html>

Live

JS Bin

View the Example of JavaScript JSON.parse online.

Why you should not use eval() with JSON

It's not safe to parse JSON using eval because eval allows much more syntax than JSON. Even it can be extended up execution of arbitrary code, which leaves a big security whole for your website.

Previous: PHP json_last_error() function
Next: Python JSON Module tutorial