返されたオブジェクトにアクセスできません - リソースサービス

Question

これは私の最初の角度アプリですので、私は間違っているとはっきりしていると確信していますが、私はグーグルで幸運なしにこのサイトを検索しました。

天気APIからJSONを取得するためにAJAX呼び出しを行うために$リソースサービスを使用しています。以下の関数はweatherServiceの関数を介してそれを取得し、返されたオブジェクトを画面に正常に記録することができます（console screenshot）。オブジェクトのプロパティ（例：info.cnt）にアクセスしようとすると、ログにはが定義されていません。が返されます。なぜこれが分かりませんか？どんな助けでも大歓迎です。

$scope.submit = function() { 
    var info = weatherService.getForecast(weatherService.city); 
    console.log(info); 
} 

マイカスタム気象サービス：

weather.service('weatherService', function($resource){ 

    this.city = 'Chicago, IL'; 

    this.getForecast = function(location) { 

     this.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", { callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }}); 

     this.weatherResult = this.weatherAPI.get({ q: this.city, cnt: 5, appid: 'e92f550a676a12835520519a5a2aef4b' }); 

     return this.weatherResult; 
    } 

}); 

Answer 1

あなたのget呼び出しは非同期に実行されます。だから、あなたのサービスは次のようにする必要があります：

weather.service('weatherService', function($resource){ 

    this.city = 'Chicago, IL'; 

    this.getForecast = function(location) { 

     this.weatherAPI = $resource("http://api.openweathermap.org/data/2.5/forecast/daily", { callback: "JSON_CALLBACK" }, { get: { method: "JSONP" }}); 

     return this.weatherAPI.get({ q: this.city, cnt: 5, appid: 'e92f550a676a12835520519a5a2aef4b' }); 

    } 

}); 

、あなたは次のように消費する必要があります：あなたは私たちがHTTPリクエストが完了したときに呼び出されるコールバックを、渡していることがわかります

$scope.submit = function() { 
    weatherService.getForecast(weatherService.city, function(response) { 
     //DO SOMETHING WITH THE RETURN 
    }); 
}; 

。

もっと進歩したければ、約束を使うことができるし、そうすべきです。それはなっただろう：

$scope.submit = function() { 
    weatherService.getForecast(weatherService.city).$promise.then(function(response){ 
     //SUCCESS 
    }).catch(function(error){ 
     //ERROR 
    }); 
}; 

は、いくつかのより多くの素晴らしい機能を確認するために、docsを見てみましょう。

では、なぜあなたはまだ、画面内の同じデータを参照してください。

事は$リソースサービスを模倣同期操作ということです。角度のデータバインディングを指定すると、$スコープへのリターンを結ぶと、応答は最終的に完了し、$ダイジェストサイクル中に、フレームワークは変数を再訪し、データがあることを確認します。しかし、私が言ったように、それはデータバインディングによるものです。あなたが見たように、すぐにデータにアクセスすることはできません。

Answer 2

$リソースサービスは、あなたがちょうどこのような解決機能を必要とするこの

weatherService.getForecast(weatherService.city).then (function(data){; 
     console.log(data); 
}); 

Answer 3

のように解決する必要がある約束を返しています。

$scope.submit = function() { 
    weatherService.getForecast(weatherService.city).then(function(res){ 
    // success handler 
     console.log(res); 
    },function(error) { 
    // error handler 
    }); 
}