Articles → JSON → Read JSON data using jQuery

Read JSON data using jQuery


















Software requirement











Prerequisite knowledge











Steps of execution











Create a new HTML file and add span tags in it




<body>
    <h2>Reading student information from json data</h2>
    Name: <span id="nameperson"></span>
    <br />
    Age: <span id="ageperson"></span>
    <br />
    Technology: <span id="technologyspan"></span>
    <br />
    Address: <span id="addressspan"></span>
    <br />
</body>





Add JavaScript code to access JSON




<script src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var Trainer =
                {
                    "Name": "Karan Gupta",
                    "Age": 28,
                    "Technology": "JSON",
                    "Address":
                        {
                            "City": "Gurgaon",
                            "State": "Haryana"
                        }
                };
            document.getElementById("nameperson").innerHTML = Trainer.Name;
            document.getElementById("ageperson").innerHTML = Trainer.Age;
            document.getElementById("technologyspan").innerHTML = Trainer.Technology;
            document.getElementById("addressspan").innerHTML = Trainer.Address.City;

            
        });
        
    </script>



Output



Click to Enlarge


Posted By  -  Karan Gupta
 
Posted On  -  Sunday, September 15, 2013

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250