Reduce Repetitiion with AJAX JSON Calls to an API

Question

I have about 15 copies of the following code on my site. The only things changing are the url, longitude, latitude, and the marker variable title. How can I chop this up and reduce the repetition?

$.ajax({
    url: "http://api.wunderground.com/api/<api_key>/conditions/q/pws:KCASANFR128.json",
    dataType: "jsonp",
    success: function(parsed_json) {
    var location = parsed_json['current_observation']['observation_location']['city'];
    var temp_f = parsed_json['current_observation']['temp_f'];
    var weather = parsed_json['current_observation']['weather'].toLowerCase();
    var iconUrl = parsed_json['current_observation']['icon_url'];
    var iconPic = new MyIcon(iconUrl);
    var markerRichmond = new L.Marker(new L.LatLng(37.779806, -122.471895), {icon: iconPic});
    markerRichmond.bindPopup("Current temperature in " +location+ " is: " +temp_f+ " and it is " + weather);
    map.addLayer(markerRichmond);
}});

score 1 · Accepted Answer · answered Jun 07 '12 at 17:16

1

You could make a function which takes in those variables and feeds them to the ajax call. Then you would only need one copy of this ajax block, which you could call by calling the getWeather function

function getWeather(url, lat, long, title){
    $.ajax({
        url: url,
        dataType: "jsonp",
        success: function(parsed_json) {
            var location = parsed_json['current_observation']['observation_location']['city'];
            var temp_f = parsed_json['current_observation']['temp_f'];
            var weather = parsed_json['current_observation']['weather'].toLowerCase();
            var iconUrl = parsed_json['current_observation']['icon_url'];
            var iconPic = new MyIcon(iconUrl);
            var markerRichmond = new L.Marker(new L.LatLng(lat, long), {icon: iconPic});
            markerRichmond.bindPopup(title);
            map.addLayer(markerRichmond);
        }
    });
}

I am not sure if I handled the title correctly here, but you get the idea. If you give an idea of how the title may change, I can fix the code accordingly.

Hope this helps.

answered Jun 07 '12 at 17:16

Norman Joyner

955
6
12

Norman, that's pretty much exactly what I was looking for I think! Thanks! This raises a few more questions though... How do I declare these variables in a clean, re-usable way? How do I make sure each set of these variables is packaged together? The variable title I was referring to is the `markerRichmond` part. – Ryan Clark Jun 07 '12 at 17:24
Anywhere you would like to make this ajax call you would simply call the `getWeather` function, passing it the appropriate values for the variables. For example, to make the call in your original post: `getWeather("http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:KCASANFR128.json", 37.779806, -122.471895, "title")`. Is the title the part you are passing to the `markerRichmond.bindPopup` method? – Norman Joyner Jun 07 '12 at 18:29
Ahh, so I'd still have to pass the variables in each time I implement the while thing? I'd like to put the url, lat, long, etc.. into say an array or hash or something, then call run this code until I run out of values... Does that make sense? – Ryan Clark Jun 07 '12 at 21:28
Sure thing. You could make an array of objects like: `var arr = [{url: "http://api.wunderground.com/api/cd48ac26fb540679/conditions/q/pws:K‌CASANFR128.json", lat: 37.779806, long: -122.471895, title: "title"}, {url: "http://anotherurl.json", lat: 17.7, long: 25.2, title: "another title"}];` and then iterate over the array, calling `getWeather` in the following fashion: `for(i=0; i< arr.length; i++){ getWeather(arr[i].url, arr[i].lat, arr[i].long, arr[i].title); }` – Norman Joyner Jun 07 '12 at 22:55

score 0 · Answer 2 · edited Nov 04 '14 at 17:26

0

var current_observation = parsed_json['current_observation'];

This also shortens amount of times parsed. Then you can refer to your variable as

current_observation['observation_location']['city'];

edited Nov 04 '14 at 17:26

Ryan Kohn

13,079
14
56
81

answered Nov 04 '14 at 17:16

Lex

36
3

Reduce Repetitiion with AJAX JSON Calls to an API

2 Answers2