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.

enter image description here

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),

});

harsimranb · Accepted Answer · 2014-07-22 19:53:48Z

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;} } 
```
In JavaScript, in the done method, you can then check:
```
data.Longitude; data.Latitude; 
```
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.

So I should Creat the class LatLongModel and then create an instance of it in the method and pass the model to the Js? Thanks for your time btw!
Yes. Create that class, instantiate it with the correct values, and return the instance in the method.
@user2915962 Do you expect multiple results from googleResults.results?
at this point no, I have now created the model that passes the two vaules (long/lat) to the Ajax. Pls see my update. Dunno if the ajax is right.
@user2915962 You can do better, check out JavaScript debugging in Google Chrome. developer.chrome.com/devtools/docs/javascript-debugging. Press F12 to open the dev tools. In the sources tab, you can set breakpoints on the code. Once break point hits, you can observe the values in the right panel, or in the console.

Collectives™ on Stack Overflow

Passing an list to Ajax

1 Answer 1

12 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Related