How To Create JSON Object In JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript JSON | Written & Updated By - Pragati
In this article we will show you the solution of how to create JSON object in JavaScript, as formost step, you need to know what is JSON object.
Its data interchange format that helps to store human readable text format and transmit data objects.
This JSON data object consists of key and value pair with formed in pre-defined rule based. If you want to know how to do it then no worries this article help you with that.
Let see below how to implement with step by step guidance.
Step By Step Guide On How To Create JSON Object In JavaScript :-
Are you curious to unravel the solution? Then let's start. First you need to create json data object, all you need to do is create variable as per rules.
Thereafter, open { curly brace and write key within double quotes followed by define : symbol.
After that at right hand side assign value to it according to your wish or need.
This is actual format but you can create based on your requirement. The sample syntax is:
Var variable_name = { "key1" : [ { "key01" : "value 1", "key02" : "value 2",....}]}
Then created data objects display inside table structure using javascript.
<html>
<head>
<title>Create object in javascript</title>
<script>
document.writeln("<h2>JSON array object</h2>");
var products = { "Mobile" : [
{ "Name" : "Mobile Made Simple", "amount" : 700 },
{ "Name" : "Guide to Mobile", "amount" : 400 }],
"Shops" : [
{ "Name" : "Shops for the Impatient", "amount" : 1000 },
{ "Name" : "Shops in Depth", "amount" : 1300 }]
}
var i = 0
document.writeln("<table border = '2'><tr>");
for(i = 0;i<products.Mobile.length;i++) {
document.writeln("<td>");
document.writeln("<table border = '1' width = 100 >");
document.writeln("<tr><td><b>Name</b></td><td width = 50>" + products.Mobile[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width = 50>" + products.Mobile[i].amount +"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
for(i = 0;i<products.Shops.length;i++) {
document.writeln("<td>");
document.writeln("<table border = '1' width = 100 >");
document.writeln("<tr><td><b>Name</b></td><td width = 50>" + products.Shops[i].Name+"</td></tr>");
document.writeln("<tr><td><b>Price</b></td><td width = 50>" + products.Shops[i].amount+"</td></tr>");
document.writeln("</table>");
document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>
- A php script can be placed anywhere in the document. A php script starts with <?php and end with ?>.
- The default file extension for php files is “.php” and php statements end with ‘;’ semicolon. In php we need to specify ‘$’ symbol before the variable name also default rule.
- As first step, we printed heading of the program using document.writeln() line of code. Variable 'products' created with two set of keys and values.
- In JSON object variable 'products' contains first set keys are (Mobile, Shops) followed by defined next set keys are (Name, amount) respectively values assigned to each key.
- Using document.writeln() and for loop data object values completely printed along with table. Your output will show you how values inserted into tables.
- Instead of echo() you can prefer print() method if you want and that not going to affects your result.
Conclusion :-
In conclusion, hope now you know how to create JSON data objects and print inside table structure using javascript.
Sometimes javascript programs need internet connection to get or see the result, if you face any difficulties in getting result check internet connection.
When we execute this program on browser it will show three rows with heading and two columns for each separate keys in JSON data.
With this help of sample code you can creatr and test JSON data objects in the same way flawlessly. As per your modification you will get result.
I hope this article on how to create JSON object in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
