Can't access objects within array - Javascript

Question

So I am running a few $http.get requests within a forloop and storing the results within an array. When I run: console.log(episodesObj[0]) it returns undefined. However when I run console.log(episodesObj) it returns the whole array:

Below is the code I am running

    var episodesObj = [];
    for(i=1;i<=num_seasons;i++) {
      $http.get('/api/show/<%=show.id%>/season/'+i)
      .then(response => {
        episodesObj.push(response.data)
      });
    }
    console.log(episodesObj); ```

My best guess is lazy console and a dupe of "how to return the result of an asynchronous call", but as you show zero code, it's kinda impossible to answer — ASDFGerte, Apr 29 '20 at 21:53
@mickl https://pastebin.com/1pN28j82 - Is this what you looking for? — Christopher Pantelli, Apr 29 '20 at 21:54
Show us the code that is leading up to the console.log (and including) — Sturm, Apr 29 '20 at 21:54
The callback provided to `$http.get().then` is not guaranteed to have finished before your console.log statement. — Sturm, Apr 29 '20 at 21:56
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Dexygen, Apr 29 '20 at 22:02
Also related, as mentioned above: [is-chromes-javascript-console-lazy-about-evaluating-arrays](https://stackoverflow.com/questions/4057440/is-chromes-javascript-console-lazy-about-evaluating-arrays) - you can clearly see in your screenshot, that the initial array it displays is empty. You just clicked and expanded it after the results were already in, and the lazy evaluation then displayed those. — ASDFGerte, Apr 29 '20 at 22:06

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

0

If you want to print the final result, you could use promise all

all(promises);

Combines multiple promises into a single promise that is resolved when all of > the input promises are resolved.

Something like:

var listOfPromises = [];
for(i=1;i<=num_seasons;i++) {      
    listOfPromises.push($http.get('/api/show/<%=show.id%>/season/'+i))     
}


$q.all(listOfPromises).then(function(result){
   
    // we run this code once all promises are resolved
    for (var i = 0; i < result.length; i++){
        episodesObj.push(result[i]);
    }
   
   console.log(episodesObj);
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 29 '20 at 21:57

Maxim Shoustin

77,483
27
203
225

@downvoter, what wrong with my answer? write a comment – Maxim Shoustin Apr 29 '20 at 22:04
1

However, as mentioned, not my downvote, so i cannot retract either. Whoever downvoted, probably isn't even watching anymore. – ASDFGerte Apr 29 '20 at 22:28

score 0 · Answer 2 · answered Apr 29 '20 at 21:59

You're not pushing the response to your array until after the http call completes, so if you immediately log episodesObj[0], of course it's undefined.

Chrome keeps live references to non-primitive things you console log, so when the http calls eventually update the array, it's also updated in the console, which is why you're able to view it later.

Can't access objects within array - Javascript

2 Answers2