Question

所以我有一个外部API，我试图访问并使用JSONP和$ resource服务提取其中的数据。我希望有一个来自ngCsv的按钮，然后在数据请求完成时将请求导出到csv文件。但是当我单击按钮时，它会保存一个空的csv文件，因为请求大约需要11秒才能完成。我想单击按钮，当数据准备就绪并完全接收时，导出csv文件。

这是我的app.js

// Initializing Application
angular.module('angelApp',['ngRoute','ngResource','ngSanitize','ngCsv'])

.config(function ($locationProvider,$routeProvider) {
  $locationProvider
  .html5Mode({
    enabled: true,
    requireBase:false
  })
  .hashPrefix('!');
  $routeProvider
  .when('/',{
    templateUrl: 'displays/main.html',
    controller: 'mainController'
  })
  .when('/extract',{
    templateUrl: 'displays/extract.html',
    controller: 'extractController'
  })
  .when('/about',{
    templateUrl: 'displays/about.html',
  })
  .otherwise({redirectTo: '/'});
})

// Defining Controllers
// Main page Controller
.controller('mainController',['$scope',function ($scope) {
  $scope.home = "Home Page!"
}])

// Extract Page Controller
.controller('extractController',['$scope','apiExtractService',function ($scope,apiExtractService) {
  $scope.extract = function () {
    return extractedData = apiExtractService.apiExtract();
  }
}])

// Adding Services To the application
.service('apiExtractService',['$resource',function ($resource) {
  this.apiExtract = function () {
    var apiData = $resource("APIADDRESS",{callback: "JSON_CALLBACK"},{get:{method: "JSONP"}});
    return apiData.get({filter: "FILTER",access_token:"TOKEN"});
  }
}])

这是我的extract.html路线。

 <div class="row">
  <div class="col-md-6 col-md-offset-3">
    <button type="button" ng-csv="extract()" filename="test.csv">Export</button>
  </div>
</div>

谢谢

Answer 1

编辑：有人在我之前基本上说过同样的事情，但我会留在这里以防万一它可以帮助任何人：）

如果您希望在请求解决后采取行动，那么使用promises是一个完美的案例。让您的apiExtractService.apiExtract方法返回一个承诺并利用它。例如：

function apiExtract(){
    var deferred = $q.defer();
    $http("get", "sampleUrl", optionalData)
        .success(function (response) {
            deferred.resolve(response);
        })
        .error(function (err) {
            deferred.reject(err);
        });
    return deferred.promise;
}

并在您的控制器中：

.controller('extractController',['$scope','apiExtractService',function ($scope,apiExtractService) {
  $scope.extract = function () {
    apiExtractService.apiExtract()
    .then(function(response){
     return response;
     }, function(err){
     console.log("something went wrong");
     });
  }

Answer 2

当您使用返回承诺的$ resource时。所以你需要捕获返回值并返回到控制器函数，如下所示

// Extract Page Controller
 .controller('extractController',['$scope','apiExtractService',function ($scope,apiExtractService) {

     $scope.extract = function () {
       return apiExtractService.apiExtract().then(function(results){
               return results;
             });
     }

  }])

Answer 3

您在apiExtract函数中返回$资源，该函数使用promises。您应该返回实际内容，而不是将promise返回到extract函数，这可以使用angularJS的$ resource。$ promise属性来完成。

$scope.extract = function() {
    apiExtractService.apiExtract().$promise.then(function(extractedData){
        return extractedData;
    });
};

Answer 4

我也有同样的问题。即使使用了诺言，我也得到了一个空文件。我能够通过传入数组而不是整个API响应JSON来解决它。

API响应为

{
    "responseStatus": "001",
        "orderList":
    [{
        "id": 33, "status": null, "lastUpdatedDate": null, "lastUpdatedUser": null,
        "orderId": 1469830, "amount": 96, "discount": 6, "isPaid": "Y"
    }]
}

在控制器中

    .controller('extractController', ['$scope', 'apiExtractService', function ($scope, apiExtractService) {
    $scope.extract = function () {
        apiExtractService.apiExtract()
            .then(function (response) {
                //You have to return an array not full JSON
                return response.orderList;
            }, function (err) {
                console.log("something went wrong");
            });
    }
}

将ngCsv与外部API一起使用

4 个答案: