Create JSON Object In JavaScript Dynamically
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of create JSON object in JavaScript dynamically, 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.
Step By Step Guide On Create JSON Object In JavaScript Dynamically :-
In JSON, we often use two functions: - JSON.stringify and JSON.parse.
JSON.stringify - This function is used to convert corresponding objects to strings or stringify them.
Example :
const obj = { name: " Thomas ", country : " japan " };
const JSON = JSON.stringify( obj );
JSON.parse - this function is used to convert a string into a corresponding JSON object or JavaScript value.
Example :
const json = '{"name":Peter, "country":England};
const obj = JSON.parse( json );
<!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 dynamically</title>
<script>
var jsonData = {} ;
document.write ( " JsonData : " + JSON.stringify(jsonData)) ;
// to create JSON object
jsonData.name = "thomas" ;
jsonData.age = 20 ;
jsonData.city= "london";
document.write ( " Data with details: " +JSON.stringify(jsonData) );
// to update JSON object
jsonData.name = "Peter" ;
jsonData.age = 40 ;
jsonData.city = "seoul" ;
document.write ("upadated data : " + JSON.stringify(jsonData) ) ;
//to read JSON object
document.write ( "the Data: " ) ;
document.write ( "name: " + jsonData.name ) ;
document.write ( "age: " + jsonData.age );
//to delete JSON object
delete jsonData.age ;
delete jsonData.city ;
document.write("Data after delete : " + JSON.stringify(jsonData) );
</script>
</head>
<body>
</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.
- Then attach JavaScript by using the < script > tag into the < head > tag.
- First create JSON data ( ex: - name, age, city, etc.) and then convert it into a string by using JSON.stringify();
- We can update the previously written JSON data by using JSON.stringify(); again.
- We can read the data using document.write().
- Lastly using the delete function we can delete any object into the string. Ex: - delete jsonData.name;.
Conclusion :-
Lastly, in conclusion, here we can say that with the help of this article create JSON objects in JavaScript dynamically.
I hope this article on create JSON object in JavaScript dynamically helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
