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 *

Raw HTML

Display

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

class is a reserved keyword in JavaScript. First change it with something else. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Satpal
– Satpal, Commented Jul 15, 2013 at 7:58
cheers Satpal, it's for illustration purposes in this forumn only. — CSharpNewBee
– CSharpNewBee, Commented Jul 15, 2013 at 8:04

aquaraga · Accepted Answer · 2013-07-15 08:43:34Z

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.

edited Jul 15, 2013 at 8:43

answered Jul 15, 2013 at 6:41

aquaraga

4,18826 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

CSharpNewBee Over a year ago

I sha try that when I'm in the office. Thanks aquaraga

CSharpNewBee Over a year ago

Aquarage that worked, just need a little help on formatting. See edit above, if you can help please

aquaraga Over a year ago

@CSharpNewBee I've edited by answer. Can you check if this works well for you?

aquaraga Over a year ago

Hmm, I don't think so. But you have to close the 'table' tag in the end - i.e. tr+="</table>". Can you try rendering the page now.

CSharpNewBee Over a year ago

this is the produced output: <tr> <td> <td>Name 1 <td>Name 2 </td> <td> <td>UK <td>US <td>FR <td>ES </td> <td> </tr>

|

Collectives™ on Stack Overflow

JSON Data from a WebMethod

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related