来自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，国家的价值观。

  $.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组数据：

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.