Angular 工厂不是 return 对象数组而是单个对象
Angular factory does not return array of objects but a single object
我是 angular 的新手,我正在尝试在工厂中加载 CSV 列表,然后将其转换为 json。我在工厂内部使用 Papaparse(CSV 到 json 库)。当我控制台登录工厂时,我得到了对象数组,这正是我想要的,但是当我将它传递到我的控制器中时,我得到了一个包含所有数据的对象。
这是我的工厂
(function() {
var app = angular.module('test');
app.factory('testFactory', ['$http', function($http) {
var url = 'my-list.csv';
var getContact = function() {
return $http.get(url).success(function(data) {
Papa.parse(data, {
header: true,
complete: function(results) {
console.log(results.data);
return results.data;
}
});
});
};
return {
getContact: getContact
};
}]);
}());
这是我的控制器
(function() {
var app = angular.module('test');
app.controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory) {
testFactory.getContact().then(function(data) {
$scope.contacts = data;
console.log(data);
});
}]);
}());
我希望能够在我的视图中做这样的事情
{{ contact.firstname }}
问题是解决的顺序。检查控制台语句表明您正在将 $scope.contacts
分配给 $http.get
承诺的解析,而不是实际的解析。
而不是 returning $http.get
承诺,return 延迟承诺并在解析结束时解决:
var parsePromise = $q.defer();
$http.get(url).success(function(data) {
Papa.parse(data, {
header: true,
complete: function(results) {
console.log(results.data);
parsePromise.resolve(results.data);
}
});
});
return parsePromise.promise;
查看工作演示 here。
更新:根据评论,您可以使用 .then
链接承诺而不是创建新的 deferred
。 plunkr 两者都有,您可以使用更改日志来切换方法。
我是 angular 的新手,我正在尝试在工厂中加载 CSV 列表,然后将其转换为 json。我在工厂内部使用 Papaparse(CSV 到 json 库)。当我控制台登录工厂时,我得到了对象数组,这正是我想要的,但是当我将它传递到我的控制器中时,我得到了一个包含所有数据的对象。
这是我的工厂
(function() {
var app = angular.module('test');
app.factory('testFactory', ['$http', function($http) {
var url = 'my-list.csv';
var getContact = function() {
return $http.get(url).success(function(data) {
Papa.parse(data, {
header: true,
complete: function(results) {
console.log(results.data);
return results.data;
}
});
});
};
return {
getContact: getContact
};
}]);
}());
这是我的控制器
(function() {
var app = angular.module('test');
app.controller('testCtrl', ['$scope', 'testFactory', function($scope, testFactory) {
testFactory.getContact().then(function(data) {
$scope.contacts = data;
console.log(data);
});
}]);
}());
我希望能够在我的视图中做这样的事情
{{ contact.firstname }}
问题是解决的顺序。检查控制台语句表明您正在将 $scope.contacts
分配给 $http.get
承诺的解析,而不是实际的解析。
而不是 returning $http.get
承诺,return 延迟承诺并在解析结束时解决:
var parsePromise = $q.defer();
$http.get(url).success(function(data) {
Papa.parse(data, {
header: true,
complete: function(results) {
console.log(results.data);
parsePromise.resolve(results.data);
}
});
});
return parsePromise.promise;
查看工作演示 here。
更新:根据评论,您可以使用 .then
链接承诺而不是创建新的 deferred
。 plunkr 两者都有,您可以使用更改日志来切换方法。