Trouble accessing JSON assigned inside $.ajax statement

Question

I'm playing around with using the forecast.io API to (eventually) make something that will email me every day about the weather in my area. When I make a request to the API, it gives me a JSON object with all the information in it. I'm using JavaScript and PHP write this. Here is the code I have so far (it's a bit messy right now):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">

var latitude = "42";
var longitude = "-71";
var coordinates = latitude + "," + longitude;

var forecast;

$.ajax({
  url: "<?php echo $_SESSION['url'] ?>42,-71",
  type: "GET",
  dataType: "jsonp",
  crossDomain: true,
  jasonpCallback: 'blah',
  success: function(data) {
    forecast = data;
    console.log(forecast.daily.summary);
  },
  error: function() {
    console.log("This failed.");
  }
});

//**********************************

document.write(getDailySummary());


//**********************************
function getDailySummary() {
  var summary = forecast.daily.summary;
  return "<p>" + summary + "</p>";
}

</script>

Right now, the $.ajax() statement runs successfully, and the forecast summary is logged in the console. However, the getDailySummary() doesn't run so well. I get the following error when I run this:

Uncaught TypeError: Cannot read property 'daily' of undefined           index.php:42
  getDailySummary                                                       index.php:42
  (anonymous function)                                                  index.php:37
Rain on Thursday and Friday; temperatures rising to 85° on Saturday.    index.php:28

This makes it sound like forecast is undefined. My initial thought is that it has to do with scope, but I've tried fiddling around with all sorts of things, including defining forecast as window.forecast, but I always get this error. Where am I going wrong?

score 4 · Answer 1 · answered Aug 05 '13 at 23:53

4

Ajax is Asynchronous.

The line below ajax method executes before the data is populated. Call that function inside the success handler

So when you try to access the forecast object it is still undefined.

success: function(data) {
    forecast = data;
    console.log(forecast.daily.summary);

    getDailySummary(forcast);
  },

And never use document.write to write to your HTML. Try appending the data to some element on the page.

answered Aug 05 '13 at 23:53

Sushanth --

55,259
9
66
105

Thanks! Also, once getDailySummary(forecast) has run, the compiler/interpreter/thing-that-executes-code (not sure what it is called in JS) will go back to the end of the success function, correct? If that is the case, is there a way to break out of a function and continue executing the code below? Or would it make more sense to have a function that contains the rest of the main code? – user2582102 Aug 06 '13 at 00:09
Generally it is better idea to call those from ajax success handler itself, if the data that is being worked with is dependent on it. Any code you place after the Ajax will run immediately without waiting for the Ajax to complete – Sushanth -- Aug 06 '13 at 00:12
Okay, so if most of my script deals with information from JSON object, I should write the script in the Ajax event handler. I think I understand it now. Thanks again! But please comment if I'm misunderstanding something. – user2582102 Aug 06 '13 at 00:17
Nope not at all.. You got it right :) – Sushanth -- Aug 06 '13 at 00:20

score 0 · Answer 2 · answered Aug 05 '13 at 23:55

0

The line:

document.write(getDailySummary());

gets called before the ajax call successfully completes, which is why you get the error as forecast has not yet been assigned. Ajax is asynchronous

answered Aug 05 '13 at 23:55

PostureOfLearning

3,481
3
27
44

Trouble accessing JSON assigned inside $.ajax statement

2 Answers2