JSON Data from a WebMethod

Question

I have the following JSON string which has been returned from Webmethod.

[{"__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}]

I'd like to present it in a WebPage as follows:

 AKA
 Peter Pan
 Donald Duck

 Countries
 US, UK

 Gender
 Male

 Percentage
 79

With each set of data being presented as I would in a asp ListView.

I've come up with this so far, but i'm struggling to get the values of AKA, Countries.

            $.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;
            }

* EDIT *

Ok, must of been the weekend heat, but i find some other errors this morning. She revised Jquery script below:

      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);

So this now produces output as required, but the layout isn't as i'd like, not being a UI developer and all. How can I present the output in a ListView?

*EDIT *

EDIT Ok so the layout is now sorted, but for some reason, I get six entries, when there are only 3 data sets:

Answer 1

Use a $.each on the arrays as well:

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

Ditto with 'countries'.

The relevant section of the code would finally look like:

                    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.