Passing an list to Ajax

Question

public List<double> GoogleGeoCode(string address)
        {
            address = "Stockholm";
            string url = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&address=";

            dynamic googleResults = new Uri(url + address).GetDynamicJsonObject();

            var cordinates = new List<double>();

            foreach (var result in googleResults.results)
            {

                cordinates.Add(result.geometry.location.lng);

                cordinates.Add(result.geometry.location.lat);

            }

            return cordinates;

        }

Now, I want two use the values in the list in my Ajax:

 $(function() {
                    $('#ajax').click(function() {
                        $.ajax({

                                url: '@Url.Action("GoogleGeoCode", "Home")',
                                context: document.body
                            })
                            .done(function(serverdata) {
                                data = serverdata;
                                $.each(data, function(i, item) {
                                    var marker = new google.maps.Marker({
                                        'position': new google.maps.LatLng(item[0], item.GeoLat[1]), <-- I thought Item would contain my list and I could use its index
                                        'map': map,
                                        'title': item.PlaceName,
                                        'Catch': item.Catch

                                    });
                                });
                            });
                    });

Im a beginner with Ajax i would really appreciate a step by step explanation on how it works if someone got the time. Thanks!

Updat: New class:

public class LongLatModel
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
    }

Controller:

public LongLatModel GoogleGeoCode(string address)
        {
            address = "Stockholm";
            string url = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&address=";

            dynamic googleResults = new Uri(url + address).GetDynamicJsonObject();

            var cordinates = new List<double>();

            var longlat = new LongLatModel();


            foreach (var result in googleResults.results)
            {

                longlat.Latitude = result.geometry.location.lng;

                longlat.Longitude = result.geometry.location.lat;

            }

            return longlat;

        }

Ajax:

$(function() {
                    $('#ajax').click(function() {
                        $.ajax({
                                // in a real scenario, use data-attrs on the html
                                // rather than linking directly to the url
                                url: '@Url.Action("GoogleGeoCode", "Home")',
                                context: document.body
                            })
                            .done(function(serverdata) {
                                data = serverdata;
                                $.each(data, function(i, item) {
                                    var marker = new google.maps.Marker({
                                        'position': new google.maps.LatLng(data.longitude, data.latitude),
                                        'map': map,
                                        'title': item.PlaceName,
                                        'Catch': item.Catch

                                    });
                                });
                            });
                    });

EDIT:

Ok, so I managed to get the right info into the AJAX (i think..) However, I have trouble relising how to place these two values where they are supposed to be.

How can i loop throgh and place them in the right place?

$.each(data, function (i, item) {

var marker = new google.maps.Marker({ 'position': new google.maps.LatLng(LONG, LAT),

});

Answer 1

1. In the C# method, you should create a data strucutre for LatLog, instead of returning a List<double> in the method.

   class LatLongModel
   {
       public double Latitude {get;set;}
       public double Longitude{get;set;}
   }
   

2. In JavaScript, in the done method, you can then check:

   data.Longitude; data.Latitude;
   

3. You also should add fail in the Ajax request in case the request fails. Check out this snippet: http://jsfiddle.net/JhWt4/

Update

In the C# code you want to create and return a List

    public class GeoCodeResultModel
    {
        public double Latitude { get; set; }
        public double Longitude { get; set; }
        public string PlaceName { get; set; }
        public string Catch { get; set; }
    }

    public List<GeoCodeResultModel> GoogleGeoCode(string address)
    {
        address = "Stockholm";
        string url = "http://maps.googleapis.com/maps/api/geocode/json?sensor=true&address=";

        dynamic googleResults = new Uri(url + address).GetDynamicJsonObject();

        var locations = new List<GeoCodeResultModel>();

        foreach (var result in googleResults.results)
        {
            locations.Add(new GeoCodeResultModel
            {
                 Longitude = result.geometry.location.lng,
                 Latitude = result.geometry.location.lat,
                 PlaceName = 'TODO',
                 Catch = 'TODO'
            }
        }

        return locations;

    }

For the JavaScript Code:

$.each(data, function(i, item) {
    var marker = new google.maps.Marker({
                 'position': new google.maps.LatLng(item.Latitude, item.Longitude), 
                 'map': map,
                 'title': item.PlaceName,
                 'Catch': item.Catch
    });
});

Disclaimer: This isn't tested code, it's to point you in the right direction.