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.