Create JSON Object In JavaScript
Last Updated : Jul 1, 2023
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of create JSON object in JavaScript, let us understand JSON first. The JSON stands for JavaScript object notation.
It is a lightweight data-exchanging format. It is used basically with API. JSON is language-independent.
First, to understand JSON we have to understand some functions of JSON. In JSON, we often use two functions: -
1. JSON.stringify: json.stringify() creates a JSON string
const myJSON ={
"name" : "peter" ,
"age" : 23 ,
"city" : "paris"
};
const me = JSON.parse(myJSON) ;
console.log(me)
2. JSON.parse(): json.parse() converts a JSON string into an object.
const flower = {
"name" : "rose" ,
"season" : "winter" ,
"colour" : "red"
} ;
const myflower = JSON.stringify(flower) ;
console.log (flower) ;
Step By Step Guide On Create JSON Object In JavaScript :-
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title> create JSON object in JavaScript </title>
<style>
body {
font-family : 'Lucida Sans', Verdana , sans-serif ;
}
h1 {
font-size : larger ;
font-weight : bolder ;
color : rgb(113, 221, 113) ;
text-align : center ;
}
h3 {
text-align : center ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<h3> create JSON object in JavaScript </h3>
<script>
let person1 = `{
"firstname" : "Thomas" ,
"lastname" : "Evans" ,
"age" : 30 ,
"city" : "london" ,
"gender" : "male"
}` ;
let obj = JSON.parse(person1) ;
console.log (obj) ;
console.log("first name: " + obj.firstname +" "+ "last name: " + obj.lastname ) ;
let person2 = {"name" : "john" , "city" : "new york" ,"gender" : "male","email": "john@gmail.com"
}
let objct = JSON.stringify(person2) ;
console.log(objct) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Created the <style> tag to add CSS to the HTML page.
- To add JavaScript Create a <script> tag.
- Create a JSON data into template strings ( ` ).
- Using JSON.parse() to create JSON string into an object.
- Using console.log() to display the data.
- creating another JSON data.
- Using JSON.stringify() to create the JSON data into a string.
- Using console.log() to display the data
Conclusion :-
At last, here in conclusion, here we can say that with this article’s help, we know how to create JSON objects in JavaScript.
I hope this article on create JSON object in JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
