Promise outside of for loop

Question

I have a for loop like so:

var currentLargest
for (var site in sites) {
    // Each site is a website (www.mysite1.com, www.mysite2.com, etc.)
    $.getJSON(site).then(function(data) {
       if (data > currentLargest) {
           currentLargest = data
       }
    });
}
// Here is where I want to use "currentLargest"

It checks multiple different websites to get the largest value. However, I can't extract the data I need after the for loop. I can only interact with currentLargest from within the promise, but that data is only relevant for ONE of the sites (it hasn't finished looping through all them until after the for loop).

How can I access the currentLargest value after the for loop containing the getJSON promises?

Possible duplicate of [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — zero298, Mar 07 '18 at 17:51
Basically that's not possible in the way you're imagining. Since the `getJSON` call is async, there is no way to access the `currentLargest` synchronously after the loop. You have to access that data via a `.then` function, like any other result that's based on an async operation. — CRice, Mar 07 '18 at 17:51
You'll want to put all the `getJSON` promises into an array, then use `Promise.all` to await the completion of all of them, then calculate the largest and do what you need with it in the `.then` of that `Promise.all`. — CRice, Mar 07 '18 at 17:58
@CRice I'm trying this implementation, but having trouble figuring out how to transcribe my `sites` array into `Promise.all()`. If you have time, could you show me an example? — AlwaysQuestioning, Mar 07 '18 at 18:58

th3n3wguy · Accepted Answer · 2018-03-07T18:35:13.903

1

// Your code:
/*
var currentLargest
for (var site in sites) {
    // Each site is a website (www.mysite1.com, www.mysite2.com, etc.)
    $.getJSON(site).then(function(data) {
       if (data > currentLargest) {
           currentLargest = data
       }
    });
}
*/

// Updated:
const sitePromisesArr = sites.map((site) => $.getJSON(site));

$.when(sitePromisesArr)
  .then((valArr, index) => {
    // The "valArr" here will be an Array with the responses
    const largest = valArr.reduce((current, next) => next > current ? next : current, 0);
    
    // This will be the largest value.
    console.log(largest);
    
    // This will be the site that contains the largest value.
    console.log(sitePromisesArr[index]);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited Mar 07 '18 at 18:35

answered Mar 07 '18 at 17:55

th3n3wguy

3,649
2
23
30

This is great, and I'll accept it! Is there a way I can keep track of what site the largest value came from, though? – AlwaysQuestioning Mar 07 '18 at 18:31
Yes. I will update my answer to provide you that information. – th3n3wguy Mar 07 '18 at 18:34
@AlwaysQuestioning => I have updated my answer to give you that information as well. – th3n3wguy Mar 07 '18 at 18:35
After testing, this doesn't work. Variables are still undefined when I do a `for` loop that loops through `valArray`. How can I make the promise have fully resolved by then? – AlwaysQuestioning Mar 07 '18 at 18:42
@AlwaysQuestioning => Can you please provide an example of the `sites` array? Maybe there is something wrong with that. – th3n3wguy Mar 07 '18 at 18:55
`const sitePromisesArr = sites.map((site) => $.getJSON("site.com/api/specificuser?=" + site));` – AlwaysQuestioning Mar 07 '18 at 19:08

score -1 · Answer 2 · answered Mar 07 '18 at 17:53

-1

You need to use a async loop and then execute a callback once all the async getJSON requests are finished. You could use http://caolan.github.io/async/docs.html#each to help with this.

answered Mar 07 '18 at 17:53

Rush

179
6

Promise outside of for loop

2 Answers2