Objects - JavaScript Object to JSON
Posted by Superadmin on May 01 2023 04:36:02

JavaScript Object to JSON

JavaScript Object to JSON

Introduction to JavaScript Object to JSON

JavaScript is the client-side programming language is mainly designed with simple object-based scenarios for developing the web pages and sent the request to the servers. The UI is in html mainly coordinate with the JavaScript using <script> tag we can sent the request to the servers using UI pages. An object is a set of collections of properties and it is associated with the key, value pairs. The property value is mainly associated with the functions so that JavaScript object is converted to JSON using JSON.stringify() is pre-defined method for transfer the JavaScript instance or any values to the JSON formats like strings or any other formats.

Syntax:

We can create JavaScript instances or any values is converted into JSON formats using JSON.stringify() method again reconverted into object using JSON.parse() method. Most probably we use these two methods because whatever we have to see in the UI string datatype is the best example for displayed it in the user screen.

<html>
<body>
<script>
var variable name= new object();
var variable name=JSON.stringify(variable name);
---some javascript logics—
</script>
</body>
</html>

The JSON.stringify method mainly used for transform the JavaScript object instance into the JSON string formats. The above codes are basic syntax for achieving the JavaScript instance into the JSON.

How does JavaScript Object to JSON work?

Examples of JavaScript Object to JSON

Given below are the examples of JavaScript Object to JSON:

Example #1

Code:

<html>
<head>
<script language = "javascript" >
document.writeln("<h2>Welcome To My Domain</h2>");
var b = { "First" : [
{ "Name"  : "Sivaraman", "Id" : 2 },
{ "Name"  : "Arun", "Id" : 3 }],
"Second"  : [
{ "Name"  : "Kumar", "Id" : 4 },
{ "Name"  : "Saran", "Id" : 5 }]
}
var i = 0
document.writeln("<table border = '3'><tr>");
for(i = 0;i<b.First.length;i++) {
document.writeln("<td>");
document.writeln("<table border = '2' width = 37 >");
document.writeln("<tr><td><b>Name</b></td><td width = 27>" + b.First[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Id</b></td><td width = 57>" + b.First[i].Id +"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
for(i = 0;i<b.Second.length;i++) {
document.writeln("<td>");
document.writeln("<table border = '4' width = 67 >");
document.writeln("<tr><td><b>Name</b></td><td width = 50>" + b.Second[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Id</b></td><td width = 50>" + b.Second[i].Id+"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>

Output:

Welcome To My Domain

Example #2

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Welcome To My Domain.</h2>
<p id="demo"></p>
<script>
var o = { name: "Sivaraman", age: 31, city: "Tup" };
var m = JSON.stringify(o);
document.getElementById("demo").innerHTML = m;
</script>
</body>
</html>

Output:

JavaScript Object to JSON 2

Example #3

Code:

<html>
<body>
<h2>Welcome To My Domain</h2>
<b>Gud Day</b>
<p id="d"></p>
<b>Welcome Users</b>
<p id="d1"></p>
<script>
var j ='{ "name":"Sivaraman","id":"1","city":"Tup" }';
var o = JSON.parse(j);
document.getElementById("d1").innerHTML =
o.name + ", sivaraman"
+ o.id + ", 1 "
+ o.city;
document.getElementById("d").innerHTML =o;
</script>
</body>
</html>

Output:

JavaScript Object to JSON 3

Conclusion

We can see the JavaScript concepts like converts JavaScript object into JSON types basically it converts and displayed in the text format but we use some default method like JSON.stringify() method for convert JSON object to string and again reconverted the datas into the object using JSON.parse() we use other datatype conversion also applicable.