✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Create JSON Object In JavaScript

Last Updated : Feb 14, 2023

IN - JavaScript

Create JSON Object In JavaScript

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>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. 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.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
  6. <h1> tag used to add heading here.
  7. Created the <style> tag to add CSS to the HTML page.
  8. To add JavaScript Create a <script> tag.
  9. Create a JSON data into template strings ( ` ).
  10. Using JSON.parse() to create JSON string into an object.
  11. Using console.log() to display the data.
  12. creating another JSON data.
  13. Using JSON.stringify() to create the JSON data into a string.
  14. 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.

Latest Tutorials