Sandip Kanzariya

JSON : Basic Understanding for Beginners

JSON : JavaScript Object Notation

Sandip Kanzariya's photo
Sandip Kanzariya
·

3 min read

JSON : Basic Understanding for Beginners

Table of contents

JSON: JavaScript Object Notation

1. Manually Access Of Object :

file Name: 1_demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Json Demo</title>
</head>

<body>
    <p>JSON : <b>J</b>ava <b>S</b>cript <b>O</b>bject <b>N</b>otation</p>
    <h1>Hello, this is Demo of JSON</h1>

    <script>        
        // 1.  Manully Access of Object : 
        const user = {
            "name": "Sandip",
            "age": 19,
            "skills": ["JAVA", "C++", "Python"],
            "add": {
                "city": "Jamnagar",
                "state": "Gujarat",
                "country": "India"
            }
        }   
        console.log(user);
    </script>
</body>
</html>

2.Fetch Single Object From .json / .js file :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Json Demo</title>
</head>

<body>
    <p>JSON : <b>J</b>ava <b>S</b>cript <b>O</b>bject <b>N</b>otation</p>
    <h1>Hello, this is Demo of JSON</h1>

    <script>
        // 2. Fetch Single Object From .json / .js 
        fetch('1_demouser.json')
        .then(response => response.json())
        .then(json =>{
             console.log(json);
        })

    </script>
</body>

</html>

.json file: 1_demouser.json

{
    "name" : "Sandip",
    "age" : 19,
    "skills" : ["JAVA", "C++", "Python"],
    "add" : {   
        "city": "Jamnagar",
        "state" : "Gujarat",
        "country" : "India"
    }
}

3.Fetch Multiple Object From .json / .js file :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Json Demo</title>
</head>

<body>
    <p>JSON : <b>J</b>ava <b>S</b>cript <b>O</b>bject <b>N</b>otation</p>
    <h1>Hello, this is Demo of JSON</h1>

    <script>
        // 3. Fetch Multiple Object From .json / .js 
        fetch('1_demouser.json')
        .then(response => response.json())
        .then(json =>{
            console.log(json);

            console.log(json.users[0]);

            console.log(json.users[1].name);
        })
    </script>
</body>
</html>

{
    "users": [

        {
            "name": "Sandip",
            "age": 19,
            "skills": [
                "JAVA",
                "C++",
                "Python"
            ],
            "add": {
                "city": "Jamnagar",
                "state": "Gujarat",
                "country": "India"
            }
        }, 

        {
            "name": "Jay",
            "age": 20,
            "skills": [
                "C",
                "C++",
                "Python"
            ],
            "add": {
                "city": "Rajkot",
                "state": "Gujarat",
                "country": "India"
            }
        },

        {
            "name": "Hardik",
            "age": 21,
            "skills": [
                "PHP",
                "C++",
                "Django"
            ],
            "add": {
                "city": "Delhi",
                "state": "Delhi",
                "country": "India"
            }

        }


    ]
}

Show on the webpage :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Json Demo</title>
</head>

<body>
    <p>JSON : <b>J</b>ava <b>S</b>cript <b>O</b>bject <b>N</b>otation</p>
    <h1>Hello, </h1>


    <ol></ol>

    <script>
        // 3. Fetch Multiple Object From .json / .js 

        let list = ""
        fetch('1_demouser.json')
        .then(response => response.json())
        .then(json =>{


            json.users.forEach(user => {
                list += `<li>${user.name}</li>`
            });
            document.querySelector('ol').innerHTML = list;
        })

    </script>
</body>
</html>

Object (Client Side) to .json String (Server Side) &

.json String (Server Side) to Object (Client Side) :

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Json Demo</title>
</head>

<body>

    <script>

        const users = [

            {
                "name": "Sandip",
                "age": 19,
                "skills": ["JAVA", "C++", "Python"],
                "add": {
                    "city": "Jamnagar",
                    "state": "Gujarat",
                    "country": "India"
                }
            },

            {
                "name": "Jay",
                "age": 20,
                "skills": [
                    "C",
                    "C++",
                    "Python"
                ],
                "add": {
                    "city": "Rajkot",
                    "state": "Gujarat",
                    "country": "India"
                }
            }
        ]

        // Object to String
        let userString = JSON.stringify(users);
        console.log(userString);

        // String to Object
        console.log(JSON.parse(userString));

    </script>
</body>

</html>

Free Fake API for testing :

Visit : { Json PlaceHolder }

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Json Demo</title>
</head>
<body>
    <h1>Todo List</h1>
    <ol></ol>
    <script>

        let list = ""
        fetch('https://jsonplaceholder.typicode.com/todos/')
        .then(response => response.json())
        .then(json =>{

            json.forEach(todo => {
                list += `<li>${todo.title}</li>`
            });
            document.querySelector('ol').innerHTML = list;
        })

    </script>
</body>
</html>

jsonjson js