Question

我有以下从Webmethod返回的JSON字符串。

[{"__type":"DEV.GlobalClasses+Class","AKA":["Peter Pan","Donald Duck"],"Countries":["US","UK"],"Gender":"Male","PercentageMatch":94},{"__type":"DEV.GlobalClasses+Class,"AKA":["Andrew"],"Countries":["FR"],"Gender":null,"PercentageMatch":72}]

我想将它呈现在WebPage中，如下所示：

 AKA
 Peter Pan
 Donald Duck

 Countries
 US, UK

 Gender
 Male

 Percentage
 79

每个数据集都像我在asp ListView中一样呈现。

到目前为止，我已经想出了这个，但我很难获得AKA，国家的价值。

            $.ajax({
                type: "POST",
                url: "Default.aspx/PopulatePopUp",
                cache: false,
                data: JSON.stringify({ messageId: messageId, messageType: messageType }),
               // data: '{ messageId:' + messageId + ', messageType:' + messageType + ' }',
                contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function (msg) {

                var classes= msg.d;


                $.each(classes, function (index, class) {

               var table =          $("<table><thead><tr><th>AKA</th><th>Countries</th><th>Gender</th><th>Percentage</th></thead><tbody>");
                    var tr = "<tr>";


                    tr += "<td>" + joinWithBr(class["AKA"].string) + "</td>";
                    tr += "<td>" + joinWithBr(class["Countries"].string) + "</td>";
                    tr += "<td>" + class["Gender"] + "</td>";
                    tr += "<td>" + class["PercentageMatch"] + "</td>";

                    tr += "</tr>";
                    table.append(tr);
                });
                table += '</tbody></table>';
                $('div#results').html(table);

            }



            });

            function joinWithBr(arrayObj) {
                var str = "";
                for (var i = 0; i < arrayObj.length; i++) {
                    str += arrayObj[i] + "<br/>";
                }

                return str;
            }

*编辑*

好的，一定是周末炎热，但今天早上我发现其他一些错误。她在下面修改了Jquery脚本：

      success: function (msg) {

                    var entities = msg.d;
                    var table = $("<table><thead><tr><th>AKA</th><th>Countries</th><th>Gender</th><th>Percentage</th></thead><tbody></tbody></table>");
                    $.each(entities, function (index, entity) {

                        var tr = "<tr>";

                        $.each(entity["AKA"], function (index, ele) {
                            tr += "<td>" + ele + "<br/>" + "</td>";
                        });
                        $.each(entity["Countries"], function (index, ele) {
                            tr += "<td>" + ele + "<br/>" + "</td>";
                        });
                        tr += "<td>" + entity["Gender"] + "</td>";
                        tr += "<td>" + entity["Percentage"] + "</td>";
                        tr += "</tr>";
                        table.append(tr);
                    });
                    $('div#results').html(table);

所以现在这会根据需要生成输出，但布局不是我想要的，不是UI开发人员。如何在ListView中显示输出？

*编辑*

Raw HTML

Display

修改好的，所以布局现在已经排序，但出于某种原因，当只有3个数据集时，我得到六个条目： results

Answer 1

在阵列上也使用$.each：

$.each(class["AKA"], function(index,ele){
    tr += joinWithBr(ele);
});

与'国家'同上。

代码的相关部分最终将如下所示：

                    var tr = "<tr><td>";
                    $.each(entity["AKA"], function (index, ele) {
                        tr += ele + "<br>";
                    });
                    tr+= "</td><td>"
                    $.each(entity["Countries"], function (index, ele) {
                        tr += ele + "<br>";
                    });
                    tr+= "</td>";
                    //Continue adding gender, percentage, etc.

来自WebMethod的JSON数据

1 个答案: