jquery: array was filled, but became empty after exiting $.each

Question

So I have an array, say arr = [], defined. Then I use $.each(otherArr, function(i, val)) to fill arr. Inside $.each, the array arr gets filled one by one. However, after I exit $.each, arr becomes empty. Not sure why. Here is the code:

var arr = [];
var url = "http://some_url/";
$.each(otherArr, function(idx, val){
     $.getJSON( url + val).then(function (result) {
         arr.push(agt);   
         console.log(arr); // -> this looks fine.
     });
});
console.log(arr); // -->> ughh.. it's empty.

Any idea why and how to fix this?