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.
