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...
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);
}
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
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.
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.
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.
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)