Wednesday, 24 June 2015

Read Json Data and Display In Table Using Javascript

Given example will demonstrate how to parse and read JSON data and display in to a table dynamically using javascript.
       
<html>
    <head></head>
<body>

    <div id="tbl"></div>
    
    <script>
        var data = '{"id": "33344455555555","email": "raju@idsandu.com",     "verified_email": true,     "name": "Raj Kumar",     "given_name": "Raj","family_name": "Kumar","link": "https://plus.google.com/109986087631687341777","picture": "https://lh4.googleusercontent.com/-WD11veoEPeM/AAAAAAAAAAI/AAAAAAAAAA8/08DhMZUUD8Y/photo.jpg","gender": "male","locale": "en","hd": "xxxx.com"}';
        var jobj = JSON.parse(data);


        var tble = "<table border='1'>";
        for (var key in jobj) {
            tble += "<tr>";
            tble += "<td>" + key + "</td>";
            if (key == "picture") {
                tble += "<td><img src='" + jobj[key] + "' /></td>";
            }
            else {
                tble += "<td>" + jobj[key] + "</td>";
            }
            tble += "</tr>";
        }
        tble += "<table>";
        document.getElementById("tbl").innerHTML = tble;


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