2016-12-20 7 views
5

工場でデータを取得する方法を学習しようとしています。現在、私は、コントローラを使用してデータをフェッチ工場でデータjsonを取得しています

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>  

が、私を使用していますこのようにファクトを移動するコードを変更する 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; 
     }); 
}]); 

それは私のデータが定義されていないというエラーが発生します。

答えて

3

singleItemfindの方法で返すのを忘れました。そして、それからデータを得ることを約束して.thenを置く。

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; 
}); 
+0

が、それはまだエラーにReferenceErrorを与える:データは先生を定義されていません。 – GerryofTrivia

+0

@vandiは私の編集を確認して、問題を修正する必要があります –

+0

ええ、私はそれ以前に推測しますが、あなたのように変更した後、私は今は 'id'が定義されていないエラーがあります。私はなぜそれが私にエラーを与えるのか分からない。私はちょうどそれを工場に移します。私は 'find:function(id)'を追加しようとします。エラーは消えましたが、それは私に何か出力を与えませんでした – GerryofTrivia

関連する問題