0

I want to make a GET request to an API and retrieve data from it. From what I know, my $.getJSON is asynchronous, meaning it won't wait till it finishes before it continues with my code. Right now, I think the best route I can tell from research is to use a callback, but I'm still confused about how best to implement this (if even the best way). Can you use this example code below to demonstrate? 

function getData(URL) {
    $.getJSON(URL, function(data) {
        //play with data, such as save to localStorage on web broswer
    }
}

function container() {
    var URL = "https://someurl....";
    getData(URL);

    // Now access the data from localStorage, which was saved during .getJSON function, will fail if getData is ran async due to delay
    // Open URL here appending data from the GET request, have to obviously have it prior to proceeding
}

I know this is fairly wide discussed and I assure you I didn't post this before researching, but I'm still having a hard time. If someone could demonstrate with this example, it might really help me understand. Thank you!

Pingolin
  • 3,161
  • 6
  • 25
  • 40
Birdman
  • 1,404
  • 5
  • 22
  • 49
  • It looks like the answer is already in the question. As it is, do all the "play" in the callback function. – Teemu Feb 13 '19 at 08:29
  • 1
    Rather than *assuring*, you could *demonstrate*; what have you read, what did you learn and what exactly do you still not understand? As you say this is fairly widely discussed, so it's hard to see how yet another attempt to explain will be successful unless you can be extremely specific. – jonrsharpe Feb 13 '19 at 08:33
  • While the question linked does provide helpful information, it would require not only to convert all .getJSON statements into .ajax notation and format, but then also require moving all subsequent code that should be ran after an asnyc request into a new function, which then should be passed into the original function as a callback...it's a lot of refactoring and I was hoping there would be something more readable/eloquent. Also, with the ajax request it would make it so the callback is ran upon success, but what if I want ALL code to wait until the request has completed? – Birdman Feb 13 '19 at 08:49
  • 1
    1. No it doesn't, you can use the same logic with `$.getJSON` or *any other async function/method*. That's the point of canonical duplicates. 2. You'd have to extract a function to use with callbacks, whether directly or to promises/observables, or you can use the `async`/`await` syntax that's also covered in the duplicate. – jonrsharpe Feb 13 '19 at 11:53

1 Answers1

-1

You can have getData take a callback function:

function getData(URL, cb) {
    $.getJSON(URL, function(data) {
        //play with data, such as save to localStorage on web broswer
        cb(data);
    }
}

function container() {
    var URL = "https://someurl....";
    getData(URL, function(data) {
      // Now access the data from localStorage          
    });
}

Or return a promise, which then allows you to use async/await.

function getData(URL) {
  return new Promise(function(resolve, reject) {
    $.getJSON(URL, function(data) {
        //play with data, such as save to localStorage on web broswer
        resolve(data);
    }
  });
}

async function container() {
    var URL = "https://someurl....";
    var data = await getData(URL);
    // Now access the data from localStorage          
}

Since $.getJSON already returns a promise, this is even better:

function getData(URL) {
    return $.getJSON(URL).then(function(data) {
        //play with data, such as save to localStorage on web broswer
        return data;
    });
}

// container function stays the same as above

Or:

async function getData(URL) {
    var data = await $.getJSON(URL);
    //play with data, such as save to localStorage on web broswer
    return data;
}

// container function stays the same as above
Trevor Dixon
  • 23,216
  • 12
  • 72
  • 109