how to bind json webservice data to html Table

Hi nrkhi401,

If you are strictly looking for binding the data to a html table, go through the following.

the following is the ajax call method for your webservice. Please make necessary changes as per your requirements to suit your application.

$.ajax({
     type: "POST",
     contentType: "application/json; charset=utf-8",
     url: "~/YourWebserviceFile.asmx/YourWebServiceName",
     data: "{}",
     dataType: "json",
     success: function (data) 
              {
                   //Write functionality to display data
                   $("#bookContainer").append(CreateTableView(data.d, 'CssClassName', true));
              },
              error: function (result) {
                   alert("Error: " + result);
              }
        });

Now, use the next script for binding the data to a table. The Html code looks as follows:

<table id="bookContainer"></table>

The last part is to call the CreateTableView method which would create the rows and columns and will append them to the table (with id="bookContainer"). This method is called in the success property of the Ajax method.

This method has 3 parameters. First is the json data from webservice, second is the class name for adding any style to the table. Third one is to show/hide the header.

// This function creates a standard table with column/rows
// Parameter Information
// objArray = Anytype of object array, like JSON results
// theme (optional) = A css class to add to the table (e.g. <table class="<theme>">
// enableHeader (optional) = Controls if you want to hide/show, default is show
function CreateTableView(objArray, theme, enableHeader) {
            
    // set optional theme parameter
    if (theme === undefined) {
        theme = ''; //default theme
    }

    if (enableHeader === undefined) {
        enableHeader = true; //default enable headers
    }

    // If the returned data is an object do nothing, else try to parse
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = '<table class="' + theme + '">';

    // table head
    if (enableHeader) {
        str += '<thead><table><tbody><tr>';
        for (var index in array[0]) {
            str += '<th scope="col">' + index + '</th>';
            break;
        }
        str += '</tr></tbody></table></thead>';
    }


    // table body
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
                
        for (var index in array[i]) {
            if (array[i][index] == null) {
                str += '<td> </td>';
            }
            else {
                str += '<td>' + array[i][index] + '</td>';
            }                    
        }
        str += '</tr>';
    }
    str += '</tr></tbody>'
    str += '</table>';
    return str;
}
</table>

Hope it helps you. Happy coding..!

Thank you,
Vamsi