Json - Nesting data


Json - Nesting data

Sample Code :

<!DOCTYPE html>
<html>
<head>
    <!-- string in javascript variable -->
    <script type="text/javascript">
        var WikiTechy = { 
            "jsonwebsite":
            {
                websiteName: "www.wikitechy.com",
                type: "technology website", 
                current: "json basics", 
                author : "venkatesanprabu"
            }
        }; 
    <!-- convert string to json variable -->
    varjsonText = JSON.stringify(WikiTechy); 
    document.writeln(jsonText);
    <!-- fetch Object from json variable -->
    varparse_Details = JSON.parse(jsonText); 
    document.writeln("<br><br>" + parse_Details);
    <!-- fetch values from json variable -->
    varparse_Details = JSON.parse(jsonText); 
    document.writeln("<br><br>" + parse_Details.jsonwebsite.websiteName);
    document.writeln("<br><br>" + parse_Details.jsonwebsite.type);
    document.writeln("<br><br>" + parse_Details.jsonwebsite.current);
    document.writeln("<br><br>" + parse_Details.jsonwebsite.author);        
    </script>
</head>
<body>
</body>
</html>

Code Explanation :

    The script element defines a javascript as its type by the code:

            <script type="text/javascript">

    A variable is declared with the name “WikiTechy”.

    The JSON object named “jsonwebsite” is defined inside the above variable.

    The JSON object contains the data in the form of key value pairs to define a website name, its type, its current topic and author is declared as follows:
varWikiTechy = { 
    websiteName: "www.wikitechy.com",
    type: "technology website",
    current: "json basics", 
    author : "venkatesanprabu"
 };

    The code varjsonText = JSON.stringify(WikiTechy); converts the JSON string WikiTechy into a JavaScript variable.

    The code document.writeln(jsonText); writes the content of the variable “jsonText” to the output window.

    The code varparse_Details = JSON.parse(jsonText); parses the string present in jsonTextas a JSON object.

    The code document.writeln("<br><br>" + parse_Details); outputs the content of “parse_Details” variable to the output window.

    The code document.writeln("<br><br>" + parse_Details.jsonwebsite. websiteName); outputs the value of key variable “websiteName” to the output window.

    Similarly, the code          

document.writeln("<br><br>" + parse_Details.jsonwebsite.type);

document.writeln("<br><br>" + parse_Details.jsonwebsite.current);

document.writeln("<br><br>" + parse_Details.jsonwebsite.author);

outputs the value of keys type, current and author.

    Finally, JSON code is completed with the ending script element as </script>.

Sample Output :

    The variable jsonwebsite is displayed in the browser as 

{"jsonwebsite": { “websiteName”: "www.wikitechy.com", “type”: “technology website”, “current”: "json basics", “author” : "venkatesanprabu"} }

    The output “[object Object]” is shown in browser as a result of printing the “parse_Details” variable.

    The website name is printed as “www.wikitechy.com” by the code

               document.writeln("<br><br>" + parse_Details.jsonwebsite. websiteName);

    The website type is printed as “technology website” by the code document.writeln("<br><br>" + parse_Details.jsonwebsite.type);

    The website current topic is printed as “json basics" by the code document.writeln("<br><br>" + parse_Details.jsonwebsite.current);

    The website author is printed as "venkatesanprabu" by the code document.writeln("<br><br>" + parse_Details.jsonwebsite.author);