Angular save http.data zu array

Question

Ich versuche, meine Daten zu speichern, die von einer $ http Anfrage zu einem Array kommen. Also habe ich die API nicht jedes Mal aufgerufen, wenn ich diese Liste brauche.

Für jetzt habe ich einen Dienst wie folgt aussehen:

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') 
    }; 
    }); 

las ich etwas über Asynchron-Anrufe und so wird mein Code weitergehen, bevor das Array gefüllt ist. Können Sie mir helfen, diesen Dienst zu erstellen, damit ich mit diesem Array arbeiten kann?

Vielen Dank im Voraus

Answer 1

es, dass Sie mit einem asynchronen Betrieb versuchen zurückzukehren, um ein synchrones Ergebnis scheint.

Sehen Sie diesen Code:

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

Wenn Ihre Funktion ausgewertet wird, müssen Sie zuerst eine HTTP-URL aufrufen und ein leeres Array zurück. Dann antwortet Ihr HTTP-Dienst (vielleicht wenige Sekunden später) und Sie setzen response.data auf articleList. Wenn Sie dies tun, ist das vorherige leere Array, das Sie zuvor zurückgegeben haben, verloren, sodass der Aufrufer immer das leere Array abrufen wird.

Was möchten Sie wird von ngResource Modul tun behandelt, aber Sie können dieses Verhalten simulieren:

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

Beachten Sie, dass der beste Weg, um Ihr Problem zu lösen, ist es wahrscheinlich zu Rückkehr das Versprechen statt durch hacken unten:

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

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

Und wenn Sie Ihre hTTP-Methode nicht jedes Mal anrufen möchten, können Sie den hTTP-Cache verfügbar mit Winkel verwenden:

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