将 ngCsv 与外部 API 结合使用
Using ngCsv with an external API
所以我有一个外部 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>
谢谢
您正在 returnapiExtract 函数中使用 $resource,它使用了 promises。您应该 return 实际内容,而不是 return 提取函数的承诺,这可以使用 angularJS 的 $resource.$promise 属性来完成。
$scope.extract = function() {
apiExtractService.apiExtract().$promise.then(function(extractedData){
return extractedData;
});
};
编辑:
基本上有人在我之前说过同样的话,但我会把它留在这里以防它对任何人有帮助:)
如果你想在你的请求得到解决后采取行动,这是使用承诺的完美案例。
让你的 apiExtractService.apiExtract
方法 return 成为承诺并加以利用。例如:
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");
});
}
因为您使用的是 return 承诺的 $resource。因此,您需要将 return 值和 return 捕获到您的控制器函数中,如下所示
// Extract Page Controller
.controller('extractController',['$scope','apiExtractService',function ($scope,apiExtractService) {
$scope.extract = function () {
return apiExtractService.apiExtract().then(function(results){
return results;
});
}
}])
我也有同样的问题。即使在使用了承诺之后,我也得到了一个空文件。我能够通过传入数组而不是整个 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");
});
}
}
所以我有一个外部 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>
谢谢
您正在 returnapiExtract 函数中使用 $resource,它使用了 promises。您应该 return 实际内容,而不是 return 提取函数的承诺,这可以使用 angularJS 的 $resource.$promise 属性来完成。
$scope.extract = function() {
apiExtractService.apiExtract().$promise.then(function(extractedData){
return extractedData;
});
};
编辑: 基本上有人在我之前说过同样的话,但我会把它留在这里以防它对任何人有帮助:)
如果你想在你的请求得到解决后采取行动,这是使用承诺的完美案例。
让你的 apiExtractService.apiExtract
方法 return 成为承诺并加以利用。例如:
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");
});
}
因为您使用的是 return 承诺的 $resource。因此,您需要将 return 值和 return 捕获到您的控制器函数中,如下所示
// Extract Page Controller
.controller('extractController',['$scope','apiExtractService',function ($scope,apiExtractService) {
$scope.extract = function () {
return apiExtractService.apiExtract().then(function(results){
return results;
});
}
}])
我也有同样的问题。即使在使用了承诺之后,我也得到了一个空文件。我能够通过传入数组而不是整个 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");
});
}
}