使用Angular将文件异步加载到对象数组中并保持其顺序

Async loading files with Angular into an object array and keeping their order

本文关键字：顺序 数组 对象 Angular 文件 异步 加载 使用      更新时间：2023-09-26

我不是在加载脚本，而是在将XML文件读取到对象数组中。我的第一次[愚蠢]尝试是这样的：

for (var i = 1; i < n; i++) {
    var filePath = "xml/chapter_"+i+".xml";
    $http.get( filePath ).success(function (data) {
        $scope.chaptersData.push (data._chapter); 
    });
}

我很快发现这不好，因为数组将按照文件完成加载的顺序填充，而不是当它们开始时（比赛条件），较小的将首先完成。我不能使用'I'的值，因为它在任何加载完成之前很长一段时间就会到达'n'。

在那之后，我以为success(function (data, i) {会起作用，但没有。我没有简单的想法，在我想出某种鲁布·戈德堡式的杂烩之前，我想我应该问问互联网的智慧，是否有"正确"的方法来做到这一点。

您可以将i传递到执行请求的函数中。

for (var i = 1; i < n; i++) {
    getFile(i);
}
function getFile(index){
    var filePath = "xml/chapter_" + index + ".xml";
    $http.get( filePath ).success(function (data) {
        $scope.chaptersData[index] = data._chapter; 
    });
}

在getFile函数中，参数index的值不会随着外部函数中i的变化而变化。因此，当成功函数执行时，它仍然处于初始值，并且可以用于填充数组。

只需将数据作为这样的对象

{
  order: [] // just your chapter id or whatever identifier value in desired order
  data: // whatever you're getting now 
}

在你的.success（顺便提一下，你应该用.then（）代替）中，只需进行

orderedChapters = [];
for (var i = 0; i < order.length; i++) {
  for (var j = 0; j < data.length; i++) {
    if (order[i] == data[j].id) {
      orderedChapters.push(data[j]);
    }
  }
}
相关文章：