How To Run Get Json And Save As A Variable, Then Use It In Other Methods

I want to parse a JSON file, then store its data in a variable and use it in different part of the code. I think for this purpose I should use $.when().done(). However, I I do no

Solution 1:

Well, you could use Promises for chaining instead, and use the data you pass around to do something with that data as you go through your chains.

So, if you want a sample implementation using promises, and handling passed around data, you can look at the following code, it:

• retrieves a random image
• passes the image url as a result
• that image url is then used to preload an image, and returns the image element
• the image element is then displayed
• the console.log statement is printed

functionretrieveData() {
  return $.when( $.getJSON('https://dog.ceo/api/breeds/image/random')
    .then( data => data.message ) );
}

functionretrieveImage( source ) {
  returnnewPromise( (resolve, reject) => {
    const image = newImage();
    image.addEventListener( 'load', function() {
      resolve( image );
    } );
    image.src = source;
  } );
}

functiondisplayImage( image ) {
  document.getElementById('image-container').appendChild( image );
  returnPromise.resolve( true );
}

retrieveData()
  .then( retrieveImage )
  .then( displayImage )
  .then( () =>console.log('all done') )
  .catch( err =>console.error( err ) );
  

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divid="image-container"></div>

Since a promise will wait for returned promises to complete (or fail), this all goes after each other, so the log statement will not be printed before the element got displayed.

When 1 step fails, it will jump to the next catch in the chain. In my example, there is only 1 catch (and I am not handling errors from $.getJSON), so if something does go wrong, it should print an error in the console.

You can of course make use of the $.when statement provided by jQuery to do pretty much the same, as it returns a Promise

So applied to your code, you should return the $.getJSON from your parse function, and then chain based on that

var myJSON;

function_parseJSON() {
  // return here, no need returning exactly what you would expect anyhowreturn $.getJSON(settings.json_src);
}

// because you returned, you can chain everything nicely together
$.when( _parseJSON() )
  // don't forget the argument here
  .then(function( data ) { myJSON = data; })
  // and these will only run after the myJSON got set
  .then( _cacheOptions )
  .then( _cacheDom )
  .then( _events )
  .then( _render );

Though I would really suggest not to work with global variables. If you add arguments to the functions you are calling, those functions will become independent from any magical variables, and can stand on their own instead

Note that if any of your chains return a deferred object, it will wait for that deferred object to be completed.

Note that we are not calling the methods ourselves in the chain, we just pass in the function reference, so it can be called in sequence ( so: _events vs _events() )