How can i convert serialized collection to javascript array in Ajax

Question

I have a code where i serailize a list in a web service and write it on the response, from there i want go get that response and convert to an array in javasript using Ajax

here is webservice code

[WebMethod]
    public void getLatLng() {
        city = new City();
        city.Lat = "-29.0882";
        city.Lng = "26.2098";
        all.Add(city);
        //2
        city = new City();
        city.Lat = "-29.1032";
        city.Lng = "26.1965";
        all.Add(city);
        //3
        city = new City();
        city.Lat = "-29.143";
        city.Lng = "26.1803";
        all.Add(city);
        //4
        city = new City();
        city.Lat = "-29.1847";
        city.Lng = "26.2393";
        all.Add(city);
        //4
        city = new City();
        city.Lat = "-29.1292";
        city.Lng = "26.2526";
        all.Add(city);

        JavaScriptSerializer js = new JavaScriptSerializer();
        Context.Response.Write(js.Serialize(all));
    }

Javascript

 const area = new Array;
            $.ajax({
                method: "post",
                url: "LatLng.asmx/getLatLng",
                dataType: "json",
                success: function (data) {
                    for (i = 0; i < data.length; i++) {
                        //create objects
                        let one = { lat: data[i].Lat, lng: data[i].Lng };
                        //add objects to array
                        area.push(one);
                        console.log("abc", JSON.stringify(one));
                    }
                },
                error: function (repo) {
                    alert("error " + repo);
                }
            });

Here is my web service results

[{"Lat":"-29.0882","Lng":"26.2098"},{"Lat":"-29.1032","Lng":"26.1965"},{"Lat":"-29.143","Lng":"26.1803"},{"Lat":"-29.1847","Lng":"26.2393"},{"Lat":"-29.1292","Lng":"26.2526"}]

and i want to turn it to an array like this

const area = [
                { lat: -29.0882, lng: 26.2098 },
                { lat: -29.1032, lng: 26.1965 },
                { lat: -29.143, lng: 26.1803 },
                { lat: -29.1847, lng: 26.2393 },
                { lat: -29.1292, lng: 26.2526 },
        

Answer 1

I recommend using Newtonsoft.Json instead of the old/legaxcy JavaScriptSerializer . Also update your controller method to return a string:

using Newtonsoft.Json;
...
[WebMethod]
public string getLatLng() 
{
    ...
    return JsonConvert.SerializeObject(all);
}

Update your javascript/jquery to the following:

let area = [];
$.ajax({
    method: "post",
    url: "LatLng.asmx/getLatLng",
    dataType: "json",
    success: function (response) {
        data = response.d; // important for asp.net
        area = JSON.parse(data);
    },
    error: function (repo) {
        alert("error " + repo);
    }
});