So close, and yet so far: flummoxed trying to pass data between functions in Twitch TV challenge

1

Still seriously struggling with how to properly move data between functions, and would greatly appreciate any hints or pointers in the right direction…

It’s kicking my tail with the Twitch TV coding task.

I pretty much get how to do the Ajax request and can get and display results, but properly passing data between the functions just isn’t making sense to me.

In particular, since I can’t retrieve all the API data in one call, I assumed I’d need to put the search values in an array, iterate across them, do an API call for each, and then update the page one section at at time.

That mostly works, but I can’t figure out any way to connect returned results to the original array element (ie array[1] = some result, array]2] = some other data, etc.). When the Ajax request hands data off to the success function that processes the data, the array element is then undefined. I assume this is a closure issue, but I don’t know how to rethink it.

(At the same time, I know that Ajax requests are async so maybe it’s a total fool’s errand to try to do this. I can see in my tests that running the page multiple times will return results in different order, probably because requests are being returned in different sequences).

I’m really trying to understand this, as I figure getting how functions, closures, and asnyc requests work are central to understanding JS. I’ve read a ton of articles and posts but avoided any code solutions. I’ve nested functions (which didn’t help), then separated (which didn’t help), and tried a bunch of different approaches – and found out how handy the dev tools in Chrome are for seeing what’s being returned and what errors are happening that the CodePen console doesn’t bother showing – but I feel like I’m missing something fundamental.

Here’s my Codepen if anyone has any tips or pointers (ignore the presentation, I’ve only bothered with that enough to verify output):

https://codepen.io/jbworks/pen/OOaRjZ

2

You can still make your code work, but you need to make use of a 2nd parameter in your processResults function. You could call it user and to call the processResults function, you would do:

processResults(data, searchList[i]);

since searchList[i] represents a user in the array. However, there is one thing you must do to get the correct i value. You were correct in your assumption about closure. As the code currently is written, i gets the value 8 (the last index of the searchList array), because since $.ajax is asynchronous, the for loop finishes iterating before the first response comes back, so i is 8 for all the processResults. The simplest way to fix this is to use the key word let in front of i = 0. You could also use an IIFE (Immediately Invoked Function Expression). If you want to know more about how that would work, then let me know.

3

That totally works. I’d tried the second parameter but it didn’t work because I hadn’t understood how"let" would help here. And I’ll read up on IIFE too. Thanks for the guidance.