时间戳

首页 > 解决方案 > 使用文本文件中的数据丰富数组

javascript - 使用文本文件中的数据丰富数组

问题描述

我正在尝试使用从文本文件加载的数据来丰富数组。通过第一个请求，我获得了将 URL 保存到文本文件的数据。现在，我想从该文本文件中取出第一行并将其添加到新数组中。这行得通。但是我也想添加原始请求中的数据。我似乎无法将两者结合在一起。到目前为止，这是我在代码中得到的：

        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("\n");
                            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);

            });

我得到的错误是 TypeError: Cannot read property 'Name' of undefined。当我推送到新数组并以“未定义”结束时，它找不到 data[i].Name 和 data[i].Url 我该如何解决这个问题？

标签： javascriptarrays

解决方案

看起来这是由于闭包和异步函数的影响，它们经常会导致类似您所面临的问题，至少在您更熟悉异步编程之前是这样。

您的for ...循环同步运行并且非常快速，并且它将在代码中的任何异步函数实际运行之前完成对所有数据元素的迭代。该变量i将迅速增加并命中data.length，因此当您的异步函数尝试使用 推送新值data[i]时，这将尝试访问data[data.length]当然未定义的值。

有很多方法可以解决这个问题，但我建议用forEachfor ...替换循环。这不仅与其余代码的异步特性一致，而且它还方便地提供了您想要访问的元素，而没有底层变量发生变化的风险。

由于闭包可能是一个困难的概念，您可能会喜欢这篇试图用简单的术语解释它们的博客文章。

推荐阅读