w3resource
JSON Tutorial

Working with JSON and JavaScript

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.

Many of our valued users post comments along with piece of code. Disqus may, false positively, consider those piece of code as Bad or Starnge syntax and send those comments to spam automatically. Even if that happens, we will make sure those useful comments are taken out of spam and approved. It may take a couple of days for that though, but any useful comment will be brought to public view for sure. We regret if that happend to any user. You may write us directly regarding this to - w3resource[at]yahoo[dot]com.