$ httpは動作しません

Question

私はangularjsのコードを持っています。 httpレスポンスの値をハードコードすると、それが表示されていないangularjsでhttpメソッドを使用すると、レスポンスが表示されます。要求がサーバーに送信されるたびに、エラー機能が取得されます。私はどこが間違っているのか分かりません。ここでは、コード

(function() { 
 
    'use strict'; 
 
    angular 
 
    .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
 
    .controller('DemoCtrl', DemoCtrl); 
 

 
    function DemoCtrl($timeout, $q, $log, $http, $scope) { 
 
    var self = this; 
 

 
    self.simulateQuery = false; 
 
    self.isDisabled = false; 
 

 
    self.repos = loadAll(); 
 
    self.querySearch = querySearch; 
 
    self.selectedItemChange = selectedItemChange; 
 
    self.searchTextChange = searchTextChange; 
 

 

 
    function querySearch(query) { 
 
     var results = query ? self.repos.filter(createFilterFor(query)) : self.repos, 
 
     deferred; 
 
     if (self.simulateQuery) { 
 
     deferred = $q.defer(); 
 
     $timeout(function() { 
 
      deferred.resolve(results); 
 
     }, Math.random() * 1000, false); 
 
     return deferred.promise; 
 
     } else { 
 
     return results; 
 
     } 
 
    } 
 

 
    function searchTextChange(text) { 
 
     $log.info('Text changed to ' + text); 
 
    } 
 

 
    function selectedItemChange(item) { 
 
     $log.info('Item changed to ' + JSON.stringify(item)); 
 
    } 
 

 

 
    function loadAll() { 
 
     $log.info('test'); 
 

 
     var repos; 
 
     repos = []; 
 

 
     $http.get('http://melkban24.ir/city/json/2').success(function(response) { 
 
     $scope.repos = response.data; 
 

 
     }); 
 

 
     return repos.map(function(repo) { 
 
     repo.value = repo.nameCity.toLowerCase(); 
 
     $log.info(repo.value); 
 
     return repo; 
 
     }); 
 
    } 
 

 

 
    function createFilterFor(query) { 
 
     var lowercaseQuery = angular.lowercase(query); 
 

 
     return function filterFn(item) { 
 
     return (item.value.indexOf(lowercaseQuery) === 0); 
 
     }; 
 

 
    } 
 
    } 
 
})();

Answer 1

$http.get()は非同期なので、.success()コールバックは、あなたの関数が戻った後まで呼び出されませんです。つまり、loadAll()はデータを返すことができません。 $scope.reposとローカル変数reposを混同しないようにしてください。

推奨されない.success()メソッドを使用しないでください。 .then()を使用すると、約束事の他の用途と互換性のある約束を返すことができます。

.thenコールバック内でマップコードを移動し、loadAll()に何かを返すようにしたい場合は、.then()が返す約束を返します。そうすればloadAll()と呼ばれるものは、約束を待つことができます。

function loadAll() { 
    return $http.get('http://melkban24.ir/city/json/2').then(function(result){ 
     var repos = result.data.data; 
     return repos.map(function (repo) { 
      repo.value = repo.nameCity.toLowerCase(); 
      return repo; 
     }); 
     $scope.repos = repos; 
     }); 
} 

今、あなたは、データを取得するには、2つの方法があります。それは、検索された後、それはスコープにrepos値として表示されます。角度テンプレートで使用すると、ページに新しいデータが表示されます。またはloadAll()を呼び出し、返されたデータを取得するために約束を使用します。

loadAll().then(function(repos) { ... }); 

また$http.get()が失敗した場合のコードを含めて検討すべきです。エラーコールバックも渡してください。

また、コメントに@Rakeschandが指摘しているように、次のステップはコントローラからサービスにすべての$httpコードを移動することです。あなたはまだ約束を返す関数を呼び出すことになりますが、受け取ったデータを実際に必要なデータに変換するコードをコントローラから削除することができます。