Ajax calls and variable scope

Hello All! I have a lovely ajax call working, and its pulling data in. I can define variables based on that JSON data and see them on the console log while in the scope of that code block. There is a lot of PHP happening so posting a code example is tough at the moment.

after that ajax call executes, in the next code block, I console log and do not see the variables. so it seems like the scope of actions can only be in the block of text where the ajax call is.

I really want to break this out, for more use elsewhere. any suggestions? is there a way to define variables from inside of an ajax request that is global...

It is likely that you are trying to use the data before the response returns.

Ajax is likely set to asynchronous which means code immediately after it will run immediately regardless of when the response returns.

You can set the aysnc options to false.

There are also a few other ways.

There are examples in the forum which show a few methods of solving this.

On my phone at mo so cannot really show you. But you should be able to find them.

I know some of my examples pulling json from google sheets do this.

2 Likes

thank you so much for pointing me in the right direction

Great article on the topic

1 Like

Thank you! I am a little bit confused as to how to use fetch with this kind of ajax request - i will read over it again to see how it could apply to this because I am a bit unsure. I am only dealing with one row of the database, no arrays or anything coming in. in this example, the first console works, the second one reverts back to null.

$.ajax({
url: getIt,
type: "GET",
success: function(data){
var results = JSON.parse(data);
var ticket_status = results["ticket_status"];
console.log(ticket_status);
}

console.log(ticket_status);

Ah gotcha... your problem is scope. You are assigning the result in the success callback to a local variable. That isn't accessible from outside the function scope. Once the success callback executes you would typically do something … like assign the variable to a global or Hype scope

hypeDocument.customData.ticket_status = results["ticket_status"];

Then do something like switch a scene, play a timeline… If you need the data later it can be retrieved from hypeDocument.customData.ticket_status
given your code is running in a Hype function.

1 Like

thank you! I am learning so much from you and I really appreciate it. I tried

$.ajax({
    url: getIt,
    type: "GET",
    success: function(data){      
    results = JSON.parse(data);
    console.log(results);
    hypeDocument.customData.ticket_status = results["ticket_status"];
    console.log(hypeDocument.customData.ticket_status);
    
    } // end success function
}); //end ajax call

console.log('ticket status out of the call is ' + hypeDocument.customData.ticket_status);

and still, my console log shows the second console log renders "ticket status out of the call is undefined" so the scope on that is also local I guess?

As @MarkHunte said the callback is asynchronous and you can only access the data AFTER the callback was executed. That could be 1-1000 ms later… but the second console.log in your code is executed immediately because it's not in the callback. As, said … you would consume the data in the callback or postpone the consumption by starting a timeline or scene change in the callback. In the new scene load or on another action (like a timeline action) you could access the data later because you reached it after the callback has fired.

1 Like

ah! that clarifies a lot. when i try to move the define fields outside of that code block, it fails. i don't understand how to move it in the code, but I think I understand about the timeline.

I should mention,

Do a google search on ajax await.

Here is a quick example from my quick look around.

var getIt = "https://spreadsheets.google.com/feeds/list/1JE7nArYljNpuX0CJhPylAY60d_QhQG-FyI4MMMg0F9I/od6/public/values?alt=json"

//- doing things this way will not lock up the page, if we did use async false then the page may lock up while waiting for a response.

//- This does still mean that we have to wait for a response and any code after the start will fire immediately. 


//-- ajax call
function getData(ajaxurl) { 
  return $.ajax({
    url: ajaxurl,
    type: 'GET',
  });
};
 

async function getInfo() {
  try {
    const results = await getData(getIt)
    console.log(results)
   
   	hypeDocument.customData.ticket_status = results.feed.entry[0].gsx$heading.$t; 
		
		
		//-- only using a hype function here to keep things tidy   
 hypeDocument.functions().callback(hypeDocument, element, event)
	
  } catch(err) {
    console.log(err);
  }
}


//-- start
getInfo();
 
hypeDocument.startTimelineNamed('t0', hypeDocument.kDirectionForward)

ajaxAwait.hype.zip (49.1 KB)

2 Likes