如何读取文件的阵列中Angularjs工厂？ [英] How to read array of files in a factory in Angularjs?

问题描述

我有文件的数组。我想读所有这些，使一个JSON数组出来。问题是， d3.csv 是一个异步函数。

的问题，我已经开始知道 $ q.defer（）已被用于归还承诺推迟到控制器。

我的问题是，我要读文件的数组，并做出相应的对象的数组。

下面是code迄今：

  myApp.factory（'myFactory'，函数（$ Q）{  变种masterData = [];  VAR visFolder =/数据/;
  变种文件= [（visFolder +Crime_full1.csv），（visFolder +accidents.csv），（visFolder +health.csv）];
  返回{
      //获取所有masterData
      得到：函数（）{
        变种推迟= $ q.defer（）;        //我想读在阵列中的所有文件
        d3.csv（文件[0]，功能（D）{
          masterData.push（四）;
          deferred.resolve（masterData）;
          的console.log（CSV文件读取）;
        }）;        返回deferred.promise;      }    }
  }）;
myApp.controller（'visCtrl'，函数（$范围，$ routeParams，myFactory）{  myFactory.get（）。然后（功能（masterData）{    // masterdata应包含在阵列中的所有文件的数据
    $ scope.masterData = masterData;
  }）;}）;
 

解决方案

您必须遍历文件数组，并调用调用D3库每个文件的功能。该函数返回的承诺。下面的的GetFile 函数的作用是相同的：

 的GetFile =功能（文件）{
    变种推迟= $ q.defer（）;
    d3.csv（文件，函数（D）{
        deferred.resolve（四）;
    }）;
    返回deferred.promise;
}
 

的的GetFile 函数返回块外定义。在 GET 函数现在必须更新调用的GetFile 与每个文件，然后用<$ C $整理结果C> $ q.all 。在code会是这个样子。

 得到：函数（）{    VAR承诺= files.map（函数（f）{
        返回的GetFile（F）;
    }）;    返回$ q.all（承诺）。然后（功能（数据）{
        data.forEach（函数（f）{
            masterData.push（F）;
        }）;
        返回masterData;
    }）;
}
 

I have an array of files. I want to read all of them and make a json array out of it. The problem is that d3.csvis an asynchronous function.

From this question, I have come to know that $q.defer() has to be used to returned deferred promise to the controller.

My problem is that I have to read an array of files and make corresponding array of objects.

Here is the code so far:

myApp.factory('myFactory', function($q) {

  var masterData=[];

  var visFolder = "/data/";
  var files=[(visFolder + "Crime_full1.csv"),(visFolder + "accidents.csv"),(visFolder + "health.csv")];


  return {
      // Get all masterData
      get: function() {
        var deferred = $q.defer();

        //I want to read all the files in array 
        d3.csv(files[0], function(d) {
          masterData.push(d);
          deferred.resolve(masterData);
          console.log("a csv file read");
        });

        return deferred.promise;

      }

    }
  });


myApp.controller('visCtrl', function($scope, $routeParams,myFactory) {

  myFactory.get().then(function(masterData) {

    //masterdata should contain data of all the files in an array
    $scope.masterData = masterData;
  });

});

解决方案

You have to iterate over the files array and call the function that calls d3 library for each file. This function should return promise. The getFile function below does the same:

getFile = function (file) {
    var deferred = $q.defer();
    d3.csv(file, function (d) {
        deferred.resolve(d);
    });
    return deferred.promise;
}

The getFile function is defined outside the return block. The get function now has to be updated to call getFile with each file and then collate the results with $q.all. The code would look something like this.

get: function () {

    var promises = files.map(function (f) {
        return getFile(f);
    });

    return $q.all(promises).then(function (data) {
        data.forEach(function (f) {
            masterData.push(f);
        });
        return masterData;
    });
}

这篇关于如何读取文件的阵列中Angularjs工厂？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！