配列に角をつけたhttp.data

Question

$ httpリクエストからのデータを配列に保存しようとしています。だから私はこのリストが必要なたびにAPIを呼び出すことはありません。今の

私はこのように見ているサービスがあります。

angular.module('schwimmfestivalApp') 
    .service('httpService', function($http) { 
    // AngularJS will instantiate a singleton by calling "new" on this function 
    var articleList = []; 
    var food = []; 


    this.getArticles = function() { 
     if (articleList < 1) { 
     $http.get('https://www.anmeldung.schwimmfestival.de/server/func/getArtikel.php').then(response => { 
      articleList = response.data; 
      console.log(articleList); 
     }); 
     } 
     return articleList; 
    }; 

    this.getArticleByCategory = function(category) { 
     if (food.length < 1) { 
     for (var i = 0; i < this.getArticles().length; i++) { 
      if (this.getArticles()[i].kategorie == category) { 
      food.push(this.getArticles()[i]); 
      } 
     } 
     } 

     return food; 
    }; 

    this.getFood = function() { 
     console.log('Food: '+ food); 
     return this.getArticleByCategory('TN Essen') 
    }; 
    }); 

私は非同期呼び出しについて何かを読んで、配列が充填される前ので、私のコードは、上に行くだろう。 このサービスを構築する方法を教えてもらえますか？事前

Answer 1

で

おかげであなたが非同期操作と同期した結果を返すようにしようとしているようです。

は、このコードを参照してください：

this.getArticles = function() { 
    if (articleList < 1) { 
     $http.get(url).then(response => { 
      articleList = response.data; 
     }); 
    } 
    return articleList; 
}; 

あなたの関数が評価されると、あなたが最初のHTTP URLを呼び出すと、空の配列を返します。その後、httpサービスが応答します（数秒後）。response.dataをarticleListに設定します。これを行うと、前に返された空の配列が失われているので、呼び出し側は常に空の配列を取得します。

何がngResourceモジュールで処理されたやりたいが、あなたは、この動作をシミュレートすることができます使用するのではなく、

this.getArticles = function() { 
    if (articleList < 1) { 
     $http.get(url).then(response => { 
      articleList.push(...response.data); 
     }); 
    } 
    return articleList; 
}; 

注あなたの問題を解決する最良の方法は、おそらくあるとリターンに約束を

// Your service : 
this.getArticles = function() { 
    return $http.get(url).then(response => { 
     return response.data; 
    }); 
} 

// Your controller : 
myService.getArticles().then(response => { 
    $scope.articles = response; 
}); 

を、あなたのHTTPメソッドごとに呼び出すにしたくない場合は、角度で利用できるHTTPキャッシュを使用することができます：以下のハック

を

// Your service : 
this.getArticles = function() { 
    return $http.get(url, { cache: true }).then(response => { 
     return response.data; 
    }); 
}