Pass json value as a variable outside the function

Question

I'm working on how to push the value of a variable outside a json function. I'm integrating Google maps and Instagram's API together so I'm passing the longitude and latitude coordinates to glat and glng to var url (which is outside the google function. Currently I'm using PHP and not really familiar with json.

  var glat;
  var glng;

  //Google maps latitude and coordinates
  $.getJSON(mapurl, function(google){
    glat = google.results[0].geometry.location.lat;
    glng = google.results[0].geometry.location.lng;
    console.log('<?php echo urlencode($_GET['location']);?>');
    console.log(glat);
    console.log(glng);
    //return glat;
  });

  var url = "https://api.instagram.com/v1/media/search?lat=" + glat + "&lng=" + glng + "&distance=1000&client_id=<?php echo $client_id; ?>&count=40&callback=?";
  //This pulls the instagram images
  console.log(url);
  //Instagram Feed
  $.getJSON(url, function (response) {
    //http://techmonks.net/instagram-using-the-api/
    for(var i = 0; i < 40; i++){
      $("#feed ul").append("<li><a target='_blank' href='"+response.data[i].link +"'><img src='"+response.data[i].images.low_resolution.url+"'/></a></li>");
    }
  });

@ErikJohnson No I'm not. Just echoing out some php values which I'm trying to steer away from at the moment. Everything is JS. — Jose Gomez, Sep 07 '15 at 17:43

Erik Johnson · Accepted Answer · 2015-09-07T19:01:27.473

2

$.getJSON causes an asynchronous XMLHttpRequest. Since this is asynchronous, lat and lng are not defined when you try to define your URL to point to Instagram.

var glat;
var glng;

//Google maps latitude and coordinates
$.getJSON(mapurl, function(google){
  glat = google.results[0].geometry.location.lat;
  glng = google.results[0].geometry.location.lng;
  console.log('<?php echo urlencode($_GET['location']);?>');
  console.log(glat);
  console.log(glng);

  var url = "https://api.instagram.com/v1/media/search?lat=" + glat + "&lng=" + glng + "&distance=1000&client_id=<?php echo $client_id; ?>&count=40&callback=?";
  console.log(url);

  $.getJSON(url, function (response) {
    //http://techmonks.net/instagram-using-the-api/
    for(var i = 0; i < 40; i++){
      $("#feed ul").append("<li><a target='_blank' href='"+response.data[i].link +"'><img src='"+response.data[i].images.low_resolution.url+"'/></a></li>");
    }
  });
});

edited Sep 07 '15 at 19:01

answered Sep 07 '15 at 17:46

Erik Johnson

858
1
7
29

This could work but I have another $.getJSON request that pulls the instagram feed. I updated my original post with the rest of my code so you can see. – Jose Gomez Sep 07 '15 at 18:14
All you have to do is nest your $.getJSON requests :) I'll update my answer in a moment – Erik Johnson Sep 07 '15 at 18:59
It worked. Did not know you can nest $.getJSON requests. – Jose Gomez Sep 07 '15 at 22:20
But just a quick question, is there a way to pass the value of a variable outside the request? – Jose Gomez Sep 07 '15 at 22:32
Not unless you change the request to execute synchronously, or use callback functions (but in that case it will still be functionally identical) – Erik Johnson Sep 07 '15 at 22:57
I see. Thanks for the help! I did run into another bug when nesting my requests if you can help, great, if not - no worries. I appreciated your help regardless! Here is the [full code](http://pastebin.com/Bw6jKrAz). The current bug I'm running into is Google maps is not understanding LatLng on line 115. Exact error message: Uncaught TypeError: Cannot read property 'LatLng' of undefined. My theory is because it's two levels in, it's not referring back to the reference script file. I can't seem to find any solution on that. Let me know what you think, thanks! – Jose Gomez Sep 08 '15 at 03:37
Please post a new question with your new problem - that way more people will be able to help you :) Sorry but I don't really have any more time to dedicate to this. Good luck! – Erik Johnson Sep 08 '15 at 20:06

Pass json value as a variable outside the function

1 Answers1