javascript - enrich array with data from text files

Question

i am trying to enrich an array with the data that I load from a text file. With the first request I get the data that holds the URL to a text file. Now from that text file I would like to take the first line and add that to an new array. This works. However i would like to add the data from the original request as well. I can't seem to combine the both together. This is what I got in code so far:

        var NewArray = [];

        $http({
            method: 'Get',
            url: "https://xxx.azurewebsites.net/api/files/"
        })
            .success(function (data) {

                for (var i = 0; i < data.length; i++) {

                    var x = data[i].Url;

                    $.when(GetFile(x))
                        .done(function (a1) {

                            var allLines = a1.split("
");
                            var lineOne = allLines[0];
                            
                            NewArray.push({
                                Name: data[i].Name,
                                Url: data[i].Url,
                                text: lineOne,
                            })
                        });
                };

                function GetFile(x) {
                    return $.ajax({
                        method: 'Get',
                        url: x,
                        success: function (data) {

                            //console.log(data);

                        }
                    });
                }

                console.log(NewArray);

            }); 

the error I get is TypeError: Cannot read property 'Name' of undefined. It can't find the data[i].Name and data[i].Url when i push to a new array and end's up 'undefined' How can I solve this?

Answer 1

It looks like this is due to the effect of closures and asynchronous functions, which frequently cause problems like the one you're facing, at least until you get more familiar with asynchronous programming.

Your for ... loop runs synchronously and very quickly, and it will complete iterating through all of your data elements well before any of the asynchronous functions in your code actually run. The variable i will quickly increase and hit data.length, so by the time your async function tries to push a new value using data[i], this is trying to access data[data.length] which is of course undefined.

There are a number of ways to fix this, but I recommend replacing the for ... loop with forEach. Not only is this consistent with the asynchronous nature of the rest of your code, but also it conveniently provides the element you want to access, without the risk of underlying variables having changed.

Since closures can be a difficult concept, you might enjoy this blog post that attempts to explain them in simple terms.