正在使用工厂获取数据 json

Question

我正在尝试学习如何在工厂内获取数据。目前我正在使用控制器获取数据

factory.js

angular
    .module('app')
    .factory('Product', ['$http', function($http){
        return{
            get: function(){
                return $http.get('https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json').then(function(response){
                    return response.data;
                });
            }
        };
    }])

详情-poduct.js

    angular
        .module('app')
        .controller('productDetailsCtrl',['$scope','$stateParams', 'Product', function($scope,$stateParams,Product){
            $scope.id=$stateParams.id;
            Product.get().then(function(data) {
                $scope.singleItem = data.filter(function(entry){
                    return entry.id === $scope.id;
                })[0];
            });
}]);

产品-detail.html

<a href="{{singleItem.url}}">
<p>{{singleItem.id}}</p>    
<p>{{singleItem.name}}</p>
<img src="{{singleItem.image}}" alt="{{singleItem.name}}">  
</a>

但是当我更改代码以像这样将 fecthing 移动到工厂内部时 factory.js

return{
            get: function(){
                return $http.get('https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json').then(function(response){
                    return response.data;
                });
            },
            find: function(){
                return $http.get('https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json').then(function(response){
                    var singleItem = data.filter(function(entry){
                        return entry.id === id;
                    })[0];
                });
            }
        };

详情-product.js

angular
    .module('app')
    .controller('productDetailsCtrl',['$scope','$stateParams', 'Product', function($scope,$stateParams,Product){
        Product.find($stateParams.product,function(singleItem){
            $scope.singleItem = singleItem;
        });
}]);

它给我一个数据未定义的错误。

Answer 1

您忘记了 return singleItem 来自 find 方法承诺。然后将 .then 置于 promise 之上以从中获取数据。

find: function(id){
    return $http.get('https://raw.githubusercontent.com/vicariosinaga/learn/master/products.json').then(function(response){
        var singleItem = response.data.filter(function(entry){
            return entry.id === id;
        })[0];
        return singleItem;
    });
}

控制器

Product.find($stateParams.id).then(function(singleItem){
    $scope.singleItem = singleItem;
});

正在使用工厂获取数据 json

Fetching data json with factory

javascript

json

promise

angularjs

angularjs-factory