Cannot read value with Ajax-jquery sent from webservice as List

Question

I am trying to get a List<Cities> using autocomplete from a web service. The list is successfuly returned to the function but I did not manage to get the resutls.

I am using console.log to see returned results and this is what I get:

For console.log(item) I get:

[Object, Object, Object]

0:Object
CityId: 7932
CityName: "BADGERYS CREEK"
__type: "Cities"
__proto__: Object

1: Object
CityId: 7933
CityName: "BALGOWLAH HEIGHTS"
__type: "Cities"
__proto__: Object

2: Object
CityId: 7934
CityName: "BALMAIN EAST"
__type: "Cities"
__proto__: Objectlength: 3

__proto__: Array[0]
....

I can get the itme.CityId with console.log(item[0].CityId)

Here is my code:

 $("#txtDeliveryCity").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "SfWebService.asmx/GetCitiesByPrefix",
                        dataType: "json",
                        data: "{'prefixText' :" + "'" + request.term + "'}" 

                        success: function (data) {
                            response($.map(data, function (item) {

                                console.log(item);                              

                                //     I guess I need to loop over the result
                                return { label: item.CityName, value: item.CityId }; // Error: String is not a function



                            }));
                        }
                    });

The WebService:

[WebMethod]   
    public List<Cities> GetCitiesByPrefix(string prefixText)
    {
        var service = new Cities();
        var cities = service.GetCityByPrefix(prefixText);                

        return cities;

    }

How can I read the CityId?

Answer 1

your return seems to be a list of objects, so you'll have to loop through your objects. i'm not sure, if i'm right - but adapting from this solution How to Loop through plain JavaScript object with objects as members?, it should be something like that:

success: function (data) {
                    response($.map(data, function (itemList) {
                        console.log(itemList);
                        for (var item in itemList){
                            var curItem= itemList[item];
                            for (var itemAttribute in curItem) {
                                if(curItem.hasOwnProperty(itemAttribute)){
                                    console.log(curItem[itemAttribute]); 
                                }
                            }
                        }

                    }));
                }