来自 WebMethod 的 JSON 数据

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}]

我想将它呈现在一个网页中，如下所示：

 AKA
 Peter Pan
 Donald Duck

 Countries
 US, UK

 Gender
 Male

 Percentage
 79

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

到目前为止，我已经想到了这个，但我正在努力获得 AKA，Countrys 的值。

            $.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 中显示输出？

*编辑 *

编辑 好的，现在布局已排序，但由于某种原因，当只有 3 个数据集时，我得到了 6 个条目：

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.