Json - Access Json Object


Json - Access Json Object

  • JSON Request/Response is a browser service that permits two-way data exchange with a JSON data server. 
  • This is made possible via script elements on the pages with the assumption that the browser will extend its support to process JSON data as follows:
Sample Code :
<!DOCTYPE html>
<html>
<head>
    <!-- string in javascript variable -->
    <script type="text/javascript">
        var WikiTechy = { 
            websiteName: "www.wikitechy.com",
            type: "technology website", 
            current: "json basics", 
            author : "venkatesan prabu"
        }; 
        <!-- convert string to json variable -->
        var jsonText = JSON.stringify(WikiTechy); 
        document.writeln(jsonText);
    
        <!-- fetch Object from json variable -->
        var parse_Details = JSON.parse(jsonText); 
        document.writeln("<br><br>" + parse_Details);
        <!-- fetch values from json variable -->
        var parse_Details = JSON.parse(jsonText); 
        document.writeln("<br><br>" + parse_Details.websiteName);
        document.writeln("<br><br>" + parse_Details.type);
        document.writeln("<br><br>" + parse_Details.current);
        document.writeln("<br><br>" + parse_Details.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 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); fetches the object from jsonText.

    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);