如何将json webservice数据绑定到html表 [英] how to bind json webservice data to html Table

问题描述

hi


i有一个名为employee.json的json文件，它保存在我的解决方案资源管理器中，我希望使用javascript或jquery将这个json数据显示到html表中，示例json文件中的数据如下： -



[{Address_Line_1：331 Bangalore，Address_Line_2：，Address_Line_3：， Address_Line_4：，AlternateAddresses：[]，City：Bangalore，Country：India，Distance：0，FormattedAddress：3s1 Bangalore，Bangalore，Bangalore 66 ，GeoCode：POINT（-34.134345334349056 20.3254345354}]



如果可能请提供一些样品请



提前感谢

hi
i have a json file called employee.json, it is saved in my solution explorer, i want to show this json data into a html table using javascript or jquery, sample data in json file is like :-

[{"Address_Line_1":"331 Bangalore","Address_Line_2":"","Address_Line_3":"","Address_Line_4":"","AlternateAddresses":[],"City":"Bangalore","Country":"India","Distance":"0","FormattedAddress":"3s1 Bangalore, Bangalore, Bangalore 66","GeoCode":"POINT (-34.134345334349056 20.3254345354" }]

if possible pls provide some samples pls

thanks in advance

推荐答案

您好nrkhi401，



如果您正在严格寻找绑定数据到html表，请看以下内容。



以下是您的webservice的ajax调用方法。请根据您的要求进行必要的更改以适合您的应用程序。

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 ，
数据： {}，
dataType： json，
成功： function （数据）
{
// 写入显示数据的功能

.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 ））;
}，
错误： function （结果）{
alert（ 错误： +结果）;
}
}）;

("#bookContainer").append(CreateTableView(data.d, 'CssClassName', true)); }, error: function (result) { alert("Error: " + result); } });

现在，使用下一个脚本将数据绑定到表中。 Html代码如下所示：

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

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

最后一部分是调用CreateTableView方法，该方法将创建行和列，并将它们附加到表中（id =bookContainer）。在Ajax方法的success属性中调用此方法。



此方法有3个参数。第一个是来自webservice的json数据，第二个是用于向表中添加任何样式的类名。第三个是显示/隐藏标题。

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>

希望它可以帮到你。快乐的编码..！



谢谢，

Vamsi

Hope it helps you. Happy coding..!

Thank you,
Vamsi

这篇关于如何将json webservice数据绑定到html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！