Serialize and convert JSON object to String using JavaScript

In this short article I will explain how to convert JSON object to JSON string i.e. Serialize JSON object to string using JSON2 JavaScript Library

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<scripttype="text/javascript"src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>

<scripttype="text/javascript">

function UpdateJSON() {

var json = document.getElementById("spnJSON").innerHTML;

//Convert to JSON object

var person = eval('(' + json + ')');

person.Name = document.getElementById("txtName").value;

person.Age = document.getElementById("txtAge").value;

person.City = document.getElementById("txtCity").value;

person.Country = document.getElementById("txtCountry").value;

//Convert back to JSON string

json = JSON.stringify(person);

document.getElementById("spnJSON").innerHTML = json;

}

</script>

</head>

<body>

<formid="form1">

<spanid="spnJSON">{Name: 'Mudassar Khan', Age: 27, City: 'Mumbai', Country: 'India'}</span>

<br/>

<div>

Name: <inputtype="text"id="txtName"/><br/>

Age: <inputtype="text"id="txtAge"/><br/>

City: <inputtype="text"id="txtCity"/><br/>

Country: <inputtype="text"id="txtCountry"/><br/>

</div>

<br/>

<inputtype="button"id="demo"value="Update JSON"onclick="UpdateJSON()"/>

</form>

</body>

</html>

In the above HTML markup I have a button demo which when clicked executes a JavaScript function UpdateJSON. Inside this function I first parse the JSON string to an object, then I update the object properties with the values from their respective textboxes and finally I again convert the object back to JSON string using JSON.stringify method and display the same in an HTML SPAN.

Demo

View Demo

The above code has been tested in the following browsers

Internet Explorer FireFox Chrome Safari Opera