tips for retrieving global variables from ajax calls using promises

Question

tips for retrieving global variables from ajax calls using promises

Currently, I am retrieving data and storing it in global variables in a less than optimal way. Here is the current method:

var tranlationJson =
  $.ajax({
     type: "GET",
     url: "translation.xml",
     contentType: "text/xml",
     dataType: "xml",
     success: function (dataSource) {            
        tranlationJson=ToJasonParser(dataSource);
     }
  });

However, I would like to improve this by utilizing promises. The challenge I face is that my code relies on third-party JS files, resulting in something like this:

<script
<script

var translationJson = $.ajax({ ...

<script 111
<script 222

Scripts 111 and 222 contain custom libraries that depend on the translationJson being populated first. How can I ensure that the translationJson is fully loaded before these scripts are executed?

javascript ajax loading

Answer 1

Answer №1

If you want to access a global variable from any of your scripts, you can use the window object. Instead of declaring your variable like

var translationJson = $.ajax({...

, you can assign it directly to

window.translationJson = $.ajax({...

. However, there are a couple of important considerations:

Firstly, you need to handle the timing issue where an ajax request may finish before some of your scripts ask for the variable. One solution is to bind all dependent scripts to the $.ajax({ success: callback function. For example:

$.ajax({
         type: "GET",
         url: "translation.xml",
         contentType: "text/xml",
         dataType: "xml",
         success: function (dataSource) {            
            tranlationJson=ToJasonParser(dataSource);
            someScriptRun(); /* run dependent script here */
         }
    });

Alternatively, you can periodically check for the variable in dependent scripts like this:

var periodicalAttemptToRunScriptDependant = setInterval( function(){
  if( 'object' == typeof window.translationJson ){
    someScriptRun(); /* run dependent script here */
    clearInterval( periodicalAttemptToRunScriptDependant );
  }
}, 1000 );

Secondly, in the provided example, every request for the variable triggers an ajax request because it's not actually a variable but a function. To fix this, consider changing your code to:

var tranlationJson;
$.ajax({
     type: "GET",
     url: "translation.xml",
     contentType: "text/xml",
     dataType: "xml",
     success: function (dataSource) {            
        tranlationJson = ToJasonParser(dataSource);
     }
});

Answer 2

If you want to access a global variable from any of your scripts, you can use the window object. Instead of declaring your variable like

var translationJson = $.ajax({...

, you can assign it directly to

window.translationJson = $.ajax({...

. However, there are a couple of important considerations:

Firstly, you need to handle the timing issue where an ajax request may finish before some of your scripts ask for the variable. One solution is to bind all dependent scripts to the $.ajax({ success: callback function. For example:

$.ajax({
         type: "GET",
         url: "translation.xml",
         contentType: "text/xml",
         dataType: "xml",
         success: function (dataSource) {            
            tranlationJson=ToJasonParser(dataSource);
            someScriptRun(); /* run dependent script here */
         }
    });

Alternatively, you can periodically check for the variable in dependent scripts like this:

var periodicalAttemptToRunScriptDependant = setInterval( function(){
  if( 'object' == typeof window.translationJson ){
    someScriptRun(); /* run dependent script here */
    clearInterval( periodicalAttemptToRunScriptDependant );
  }
}, 1000 );

Secondly, in the provided example, every request for the variable triggers an ajax request because it's not actually a variable but a function. To fix this, consider changing your code to:

var tranlationJson;
$.ajax({
     type: "GET",
     url: "translation.xml",
     contentType: "text/xml",
     dataType: "xml",
     success: function (dataSource) {            
        tranlationJson = ToJasonParser(dataSource);
     }
});

tips for retrieving global variables from ajax calls using promises

Answer №1

Similar questions

Tips on extracting the image URL after uploading via Google Picker

Would it be possible to continuously send multiple documents to MongoDB using a loop?

TemplateEditor serving as an interactive form

The utilization of ES Modules within a Next.js server.js

Tricks for preventing axios from caching in GET requests

Python Flask login screen not showing error message

Encountered an Uncaught ChunkLoadError with Vercel Next.js: Chunk 0 failed to load

Puppeteer is unable to detect the node.js handlebars helpers

Using JavaScript to make an AJAX request when a dropdown menu from

How can we automatically delete a message in DiscordJS after a certain amount of time has passed?

Issue: the size of the requested entity is too large

Tips for updating the class of a button upon clicking it

Transforming a cURL command into an HTTP POST request in Angular 2

Prompting a 401 error immediately after attempting to login through the Express REST API

What is the best way to pass an array to a child component in React?

Is it better to have a single object with all required modules in NodeJS, or follow the "standard" paths in the code?

Utilize Twilio to forward messages to a different phone number

Need jQuery solution for changing CSS in numerous locations upon hover

tips for replicating the impact of http://wearehunted.com

Using jQuery to send a post request to a PHP script using either JavaScript or PHP