サービスでhttpリクエストを作成し、コントローラで応答を取得します

Question

サービスを使用してローカルJSONファイルのhttpリクエストを作成しています。私は成功したHTTPリクエストからのデータをコントローラに保存しようとしていますが、その部分は動作していません。しかし、httpリクエストはサービス上で成功したようです。

var myModule = angular.module("MyApp", []) 

    .controller('MyController', function(Utilities){ 

    //this is not working 
    self.socialArr = Utilities.getData("data.json"); 

    }).service('Utilities', function($http) { 

    var self = this; 

    self.getData = function(jsonData) { 
     $http.get(jsonData) 
     .then(function(response) { 
      //First function handles success 
      var theData = response.data; 
      console.log(theData); //this works (data is logged) 
      return theData; 
     }, function(response) { 
      //Second function handles error 
      console.log("Error loading JSON data"); 
     }); 
    }; 
}); 

Answer 1

にあなたはserviceメソッドから何かを返されていません。 $httpプロミスを返し、then()をコントローラに使用して、返されたデータをコントローラのプロパティに割り当てます。また、あなたはコントローラ

angular.module("MyApp", []) 

.controller('MyController', function(Utilities) { 
    // store reference of "this" 
    var self = this; 
    // call service method 
    Utilities.getData("data.json").then(function(data) { 
    // assign data after promise resolves 
    self.socialArr = data; 
    }); 


}).service('Utilities', function($http) { 

    var self = this; 

    self.getData = function(jsonData) { 
    // return the promise 
    return $http.get(jsonData).then(function(response) { 
     return response.data; 
     }, function(response) { 
     //Second function handles error 
     console.log("Error loading JSON data"); 
     }); 
    } 
}); 

Answer 2

私はあなたが非同期呼び出しを行っているため、約束を使用している必要があります。

self.getData = function(jsonData) { 
var deferred = $q.defer(); 
     $http.get(jsonData) 
     .then(function(response) { 

      if (response.data) { 
     deferred.resolve(response); 
    } else { 
     deferred.reject(response); 
    } 

     }, function(response) { 
      deferred.reject(response); 
     }); 
return deferred.promise; 
    }; 

コントローラ

Utilities.getData("data.json").then(function(res) 
{ 
    self.socialArr=res; 
},function(e){ 

}); 

Answer 3

でselfを定義していないあなたは（$ http.get後に約束を返す必要があります）、その後（successCallback）。

return文、あなたのコード内

return theData; 

は閉じ込められsuccessCallbackに "スコープ" されます。そのためにハンドルを取得するには、successCallbackがその一部であるという約束を返す必要があります。

  self.getData = function(jsonData) { 

     // store the promise 
     var promise = $http.get(jsonData) 
     .then(function(response) { 
      //First function handles success 
      var theData = response.data; 
      console.log(theData); //this works (data is logged) 
      return theData; 
     }); 

     // return the promise, which can get you the successCallback's returned data. 
     return promise; 
     };   

console.log出力はコードが実行されたことを意味しますが、返されたtheDataは関連付けられている約束なしには使用されません。 $のq`は `使用

  Utilities.getData("data.json").then(function(socialArr){ 
      $scope.socialArr = socialArr; 
      // this should print 
      console.log($scope.socialArr); 
      }); 

作業plunkr here

Answer 4

var myModule = angular.module("MyApp", []) 

.controller('MyController', function(Utilities){ 

    Utilities.getData("data.json").success(function(responce) { 
     self.socialArr = response.data; 
    }) 

}) 
.service('Utilities', function($http) { 

    var self = this; 

    self.getData = function(jsonData) { 
     return $http.get(jsonData).error(function(responce) { 
      console.log("error!"); 
     }) 
    }; 
});