Table Using JSON in Salesforce

Send the list data to the page from a controller using JSON.Serialize() function and using the following script traverse through the JSON string display in using a table.

Demo Here 

$(document).ready(function(){

     $("#userdata tbody").html(""); 
   
        var json = {!jsonString};        
        var tr;
        for (var i = 0; i < json.length; i++) {
                        
            var tblRow =
                        "<tr>"
                        +"<td>"+json[i].Accountid+"</td>"
                        +"<td>"+json[i].AccountData+"</td>"                        
                        +"</tr>";
            $(tblRow).appendTo("#userdata tbody");
        }

});

The Page:

 <apex:pageBlock title="Table Using JSON" id="TableUsingJSon">
                <apex:pageBlockSection columns="2">               
                    <apex:outputPanel >
                         <center>
                            <table id="userdata" border="1">
                                <thead>
                                    <th>Account id</th>
                                    <th>Account Name</th>
                                </thead>
                                <tbody></tbody>
                            </table>    
                         </center>    
                    </apex:outputPanel>
                           
                    <apex:pageBlockSectionItem >
                        <apex:outputPanel >
                           {!jsonString} 
                        </apex:outputPanel>
                    </apex:pageBlockSectionItem>
                </apex:pageBlockSection> 
            </apex:pageBlock>