Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by John Weland
John Weland
42,478 Points

Passing variables to sibling functions

So I have two functions, the first one take in a zip-code and converts it to latitude and longitude. The second take a latitude and longitude and returns weather data.

both work independently but I cannot figure out how to pass the lat/lon from the first into the second. 

jQuery( document ).ready( function ($) {
    function googleMaps(){
        var zipcode = 78130;

        $.ajax({
           url : "http://maps.googleapis.com/maps/api/geocode/json?address="+zipcode+"&sensor=false",
           method: "POST",
           success:function(data){
               latitude  = data.results[0].geometry.location.lat;
               longitude = data.results[0].geometry.location.lng;
                       alert(latitude + " , " + longitude); //testing
           }
        });
    }
    googleMaps();

    function forecast(){
        var apiKey = ' ############### ';
        var url = 'https://api.forecast.io/forecast/';
        var latitude = 0; // for testing
        var longitude = 0;// for testing
        var data;

        $.getJSON(url + apiKey + "/" + latitude + "," + longitude + "?callback=?", function(data) {
          $( document ).createElement('p').text(data.currently.temperature);      
        });
    }
    forecast();
});

any insight would be great. I am sure there is far better ways to write this to be more reusable.

1 Answer

Zachary Green
Zachary Green
16,359 Points

one way is to make the lat and long global and then pass those two as arguments to forcast(); try this 

jQuery( document ).ready( function ($) {

    var lat, lng;
    function googleMaps(zipcode){

        $.ajax({
           url : "http://maps.googleapis.com/maps/api/geocode/json?address="+zipcode+"&sensor=false",
           method: "POST",
           success:function(data){
               lat  = data.results[0].geometry.location.lat;
               lng = data.results[0].geometry.location.lng;
                       alert(latitude + " , " + longitude); //testing
           }
        });
    }

    function forecast(latitude, longitude){
        var apiKey = ' ############### ';
        var url = 'https://api.forecast.io/forecast/';
        // var latitude = 0; // for testing
        // var longitude = 0;// for testing
        var data;

        $.getJSON(url + apiKey + "/" + latitude + "," + longitude + "?callback=?", function(data) {
          $( document ).createElement('p').text(data.currently.temperature);      
        });
    }

    googleMaps(78130);
    forecast(lat, lng);
});
John Weland
John Weland
42,478 Points

Hmm not working first it gave me an error about cross-origin I edited it a bit and now lat, lng are undefined.

Zachary Green
Zachary Green
16,359 Points

i just noticed your using POST in the ajax to googleapi. shouldnt be get since you not sending any data to save. that is probably why you got the cross domain error. that is also why you lat and lng are undefined your not getting the data you expected from the server.

John Weland
John Weland
42,478 Points 
jQuery( document ).ready( function ($) {

    var lat, lng;
    function googleMaps(zipcode){
        $.ajax({
           url : "http://maps.googleapis.com/maps/api/geocode/json?address=" + zipcode + "&sensor=false",
           method: "GET",
           success:function(data){
               lat  = data.results[0].geometry.location.lat;
               lng = data.results[0].geometry.location.lng;
           }
        });
    }

    function forecast(latitude, longitude){
        var apiKey = '###';
        var url = 'https://api.forecast.io/forecast/';
        // var latitude = 0; // for testing
        // var longitude = 0;// for testing
        var data;

        $.getJSON(url + apiKey + "/" + latitude + "," + longitude + "?callback=?", function(data) {
          $( document ).createElement('p').text(data.currently.temperature);      
        });
    }

    googleMaps(78130);
    forecast(lat, lng);
});

still showing undefined

GET https://api.forecast.io/forecast/9b176c486dcad0eaf7d6116ac46a0957/undefined,undefined?callback=jQuery2130937151940073818_1421529105079&_=1421529105080

Zachary Green
Zachary Green
16,359 Points

the only thing i still suggest is to make sure your getting the data you expect from google

John Weland
John Weland
42,478 Points

yeah I just added back my alert and stopped forecast and just called Google and it shows my lat lng however it calls it in like 10 - 15 digits. eg -98.0683720000001 as apposed to -98.0683 I'm not sure if that matters.

John Weland
John Weland
42,478 Points

OK so if I don't execute the two functions until I'm in the dev console and then execute googleMaps() and then execute forecast() it works. So for some reason they are executing at the same time. Any idea how to set 'do this THEN to this'?