JavaScript Anonymous function in function behaves strangely

Question

I am doing simple app in javascript. I have "main_script" where I invoke everything. There is global variable "feeds" which is an array, like this:

var feeds = [];

Then after that I use function, that loads JSON file from multipe URLs (also array):

feeds = LoadJsonFeeds(urls); // Load feeds
console.log("main_code feeds.length: " + feeds.length);

That console log I mention later. Ok and now he is my LoadJsonFeeds (in different .js file, just a function):

function LoadJsonFeeds(urls) {
    var feeds_tmp = [];
    // URLs can be more - for example 50 feeds from url[0] and 20 from url[1]
    for(var u = 0; u < url.length; u++) {
        $.getJSON(url[u], function(data) {
            var allFeeds = data.Result.Items; // allFeeds without check if they are ok
            for(var i = 0; i < allFeeds.length; i++) {
                // Is feed ok?
                if (allFeeds[i].Text != null)
                {
                    // Some more checking, but lets say ok  for this
                    feeds_tmp.push(allFeeds[i]);
                }
                // This I mention later
                console.log("LoadJson feeds.length: " + feeds.length);
            }
        });
    }
    console.log("LoadJson return"); // Mention later
    return feeds_tmp;
}

And here is the problem I am struggling with. When I look at the console, here what I see:

LoadJson return
main_code feeds.length: 0 
LoadJson feeds.length: 1
LoadJson feeds.length: 2
LoadJson feeds.length: 3
etc...

I just don't see the logic behind it! How can it first returned the function with nothing, then the main_script continues. After that, the function ALTER one by one the global variable "feeds". I suspect the anonymous function, but don't know what to do with it.

What am I trying to achive? Simple, I wanted to have function, that load JSON files from URLs. For example url[0] has 50 feeds, url[1] has 20. If everything is ok then it should return array of 70 feeds. I use this for the first time in main_script, and then in interval for update, which I call every few seconds. In this function I check, which feed is new and put it somewhere else:

function UpdateFeeds(url) {
    console.log("updating...");

    var feeds_tmp = LoadJsonFeeds(url);
    console.log("Update feeds_tmp.length: " + feeds_tmp.length); // This is 0
    for(var f_tmp = 0; f_tmp < feeds_tmp.length; f_tmp++) { // This does not happen because feeds_tmp.length = 0
        for(var f = 0; f < feeds.length; f++) {
            // Check what feed is new and put it somewhere else (the new one)
            }
        }
    }
    feeds = feeds_tmp; // Make all new feeds the global variable
}

But since the returned array is 0, that forloop does not happen. But it will still alter the global variable "feeds" anyway. For the main function it does not matter. In global variable the datas are in it, but I really need to find a new ones and do some work with it. But since it does not work that way, I am pretty lost.

What am I missing and how to fix this? Thank you!

.. unless you intentionally make it synchronous with something like [async](https://github.com/caolan/async). — Ville, Jun 24 '17 at 07:25

score 1 · Accepted Answer · answered Jun 24 '17 at 07:20

Your console.log("LoadJson feeds.length: " + feeds.length); called later because its a asynchronous call , you can update this function as

    function LoadJsonFeeds(urls,callback) {
    var feeds_tmp = [];
    // URLs can be more - for example 50 feeds from url[0] and 20 from url[1]
    for(var u = 0; u < url.length; u++) {
        $.getJSON(url[u], function(data) {
            var allFeeds = data.Result.Items; // allFeeds without check if they are ok
            for(var i = 0; i < allFeeds.length; i++) {
                // Is feed ok?
                if (allFeeds[i].Text != null)
                {
                    // Some more checking, but lets say ok  for this
                    feeds_tmp.push(allFeeds[i]);
                }
                // This I mention later
                console.log("LoadJson feeds.length: " + feeds.length);
            }
              if(u==url.length.1) // to make sure all URL loaded
                callback(feeds_tmp)
        });
    }

}

And call your function as

     feeds = LoadJsonFeeds(urls,function(feeds){
 console.log("main_code feeds.length: " + feeds.length);

}); // Load feeds

Of course that comments are just for showing what it is happening. Thanks, I will try this. I had suspicion to use callback, but I am pretty new to javascript. — Stepan, Jun 24 '17 at 07:25

JavaScript Anonymous function in function behaves strangely

1 Answers1