News
IBM to offer mobile security as a service IBM will start delivering mobile security-as-a-service (MaaS) through its own cloud infrastructure in India, a move that is expected to better address in-country data requirements... IBM Spectrum Computing: IBM has enlarged its portfolio of software-defined infrastructure solutions with cognitive features for workload management.  * LiFi internet technology has been introduced, the new type of wireless internet connection that gives 100 times faster than traditional WiFi -- Invented by Professor Harald Haas from the University of Edinburgh. * Sci. Rachid Yazami has developed a smart chip that charges smartphones in less than 10 minutes. BenQ has launched BlueCore projector - Consumer electronics major BenQ has launched its first BlueCore laser light source projector. For those unaware, devices with BlueCore laser technology have a high contrast output of 80000:1 with an extended lamp life and efficiency. ***
  Nov 23 2014 5:22AM     Anand
  1 Comments    3256 Views  
Here Anand gave such a good explanation about Convert JSON Result to JavaScript Object and Bind result dynamically in table.
Consider the following as JSON Result.

var jsonRes = '{ "students" : [' +
'{ "firstName":"Michel" , "Ryan":"John" ,"age":18},' +
'{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
'{ "firstName":"James" , "lastName":"Henry","age":15 } ]}'; 

Then, Convert JSON to Javascript Object Using built-in function JSON.parse() available in javascript.
var studentObject = JSON.parse(jsonRes);
JavaScript

<script type="text/javascript">
        window.onload = function what() {
            var jsonRes = '{ "students" : [' +
              '{ "firstName":"Michel" , "lastName":"John" ,"age":18},' +
              '{ "firstName":"Richard" , "lastName":"Joe","age":20 },' +
              '{ "firstName":"James" , "lastName":"Henry","age":15 } ]}';

            var studentObject = JSON.parse(jsonRes);
            var bindHtml = "";
            if (studentObject != null) {

                bindHtml += "<table class='tblBorder'>";
                bindHtml += "<tr><th>FirstName</th><th>LastName</th><th>Age</th></tr>";
                for (var i = 0; i < studentObject.students.length; i++) {
                    bindHtml += "<tr style='text-align: center;'>";
                    bindHtml += "<td>'" + studentObject.students[i]["firstName"] + "'</td>";
                    bindHtml += "<td>'" + studentObject.students[i]["lastName"] + "'</td>";
                    bindHtml += "<td>'" + studentObject.students[i]["age"] + "'</td>";
                    bindHtml += "</tr>";
                }
                bindHtml = bindHtml + "</table>";
                document.getElementById("tableContainer").innerHTML = bindHtml;
            }
        }
    </script>

HTML

<html>
  <body>
    <div id="tableContainer"></div>
  </body>
</html>

CSS

<style type="text/css">
style='border: 1px solid #81B411;border-collapse: collapse;width: 34%;' border='1'
.tblBorder
{
  border: 1px solid #81B411;border-collapse: collapse;width: 34%;'
}

.tblTr
{
background-color: #81B411;
}

</style>

Design
Hi, This is Anand.I hope this page will helps you to Convert JSON Result to Java script Object and bind dynamically in table.Thanks.
BackToTop
Comments


AnonymousUser
Sep 5 2015 4:02AM
Great and simple explanation. Thanks.

 
Search
Recent Posts
Bind Gridview from CSV file in Asp.Net C#
Jun 18 2017 11:38PM Posted By Michael
Call WebService method from jQuery in every 1 minute
Feb 27 2017 11:51AM Posted By John
Gridview custom CSS in ASP.Net
Feb 25 2017 10:59AM Posted By Micheal Ryan
Read excel file and bind to Gridview in C#
Feb 25 2017 10:20AM Posted By Micheal
Read excel file and convert to List in C#
Feb 25 2017 6:26AM Posted By Michael
Encryption and Decryption for Password in C#
Feb 17 2017 3:52AM Posted By Michael
How to create Chart in ASP.Net C#
Feb 16 2016 8:03AM Posted By Michael Ryan
Tags
Follow us on Facebook
Follow us on Google +
Recent post in your Email inbox.
Enter your email address: