Question

I have a PhoneGap / jQuery Mobile app that I am developing. I am getting some strange results on script that I have used before.

$.ajax({type: "GET",
            url: "http://****.net/****/GetMembers.php",
            data: {get_param: "Member"},
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, element) {
                    $("#members-content").append("<li><a id='members-a-" + element.ID + "' data-id='" + element.ID + "' href='#member-details'><img src='" + element.ImgURL + "' /><h3>" + element.Name + "</h3></a></li>");
                    $("#members-a-" + element.ID).bind('click', function () {Members.MemberID = $(this).attr('data-id'); MemberDetails.Load(); });
                    $("#members-content").listview("refresh");
                    });
           }
    });

JSON returned from webservice:

[{“Member”:{“ID”:1,”Name”:”Member 1″,”ImgURL”:null}},{“Member”:{“ID”:2,”Name”:”Member 2″,”ImgURL”:null}},{“Member”:{“ID”:3,”Name”:”Member 3″,”ImgURL”:null}},{“Member”:{“ID”:4,”Name”:”Member 4″,”ImgURL”:null}}]

In my #members-content list I am getting undefined for the <h3> name element.

Answer 1

You’ve got a double-nested object there. You should be using

element.Member.ImgURL

e.g. look at the json:

[
    {   <--element in your .each() loop
       "Member": {
           "ID":1,
           "Name":"Member 1",
           "ImgURL":null
       }
    },
    { etc...