angularjs $http.um json funktioniert nicht in der service-Schicht

Ich bin die Entwicklung einer angularjs-app als einen Teil meines angularjs lernen. Ich habe Controller und von dort rufe ich die service-Ebenen.

leagueManager.service("teamsService", function($http){
    var teams = {};
        $http.get('data/teams.json').then(function(data) {
        teams = data;
    });
    this.getTeams = function(){
        return teams;
    };

});

Bemerkte ich, dass aufgrund der asynchronen Natur des $http.bekommen.dann Sachen, werden die Daten nicht sofort abgerufen und daher würde ich nicht die "teams", wenn ich Sie nennen würde-getTeams() von der Steuereinheit (teamsController), würde ich nichts bekommen.

Irgendeine Idee, wie kann ich dies beheben?

Zweiter Versuch:
Nach der Lektüre über latente und verspricht auf eckig als angeregt durch den post weiter unten, ich habe versucht, nach, hat aber noch keine Wirkung. Meine variable teams nicht füllt, wie ich will, und Sie sind aufgefüllt, und danach wird nicht helfen, in meinem UI:

Mein controller teamsController.js

leagueManager.controller('teamsController', function($scope, $location, teamsService, $routeParams){
//init function to initialize data when controller is called everytime.
var init = function(){
        $scope.teams = [];
        var promise = teamsService.getTeams();
        promise.then(
        function(data){
            console.log("teams after promise:="+data);
            $scope.teams = data;
        }
        ,function(reason)
        {
                alert('Failed: ' + reason);
        }
        );
        console.log("teams in the scope:="+$scope.teams);
};

init();
});

Und hier ist mein ServiceLayer teamsService.js

leagueManager.service("teamsService", function($http, $q){
this.getTeams = function(){
  var deferred = $q.defer();
     var url = 'data/teams.json';
     $http.get(url).success(function(data, status) {
         //Some extra manipulation on data if you want...
         deferred.resolve(data);
     }).error(function(data, status) {
         deferred.reject(data);
     });
     return deferred.promise;
}
});

Können Sie oder jemand mir helfen, was ich falsch mache?
Dies ist, was gedruckt wird, in der browser-Konsole nach Ausführung:

teams im Bereich:= teamsController.js:27

teams nach der Verheißung:=[object object],[object object],[object object],[object object],[object object]

Dies einfach zeigt, dass ich tun, um das json-Objekt, aber nicht an der Zeit, die ich möchte. Für einige Grund diese latente/Versprechen Ding hatte keine Auswirkungen.

BITTE HELFEN, DIESES NEUE ECKIGE ENTHUSIASTEN

Ich erstellte ein JsFiddle-Beispiel, das ist fast das gleiche wie das, was du suchst: jsfiddle.net/sravikiran/HYxC8/3. Überprüfen Sie es und vergleichen Sie es mit Ihrem code. Ich check dein Problem, aber einige Zeit brauchen.
Vielen Dank S. Ravi Kiran, Ihr jsfiddle hat mir geholfen, Debuggen das problem. Das Versprechen und verzögern Logik war in Ordnung, aber es war auch meine anderen Teil des Codes, der gab mir Probleme, die ich behoben.
Schön zu wissen, dass 🙂

InformationsquelleAutor cooler | 2013-09-12

19

Yeah Sie brauchen, um ein Versprechen-Schnittstelle. Also anstatt eines teams-Objekt, direkt haben Sie, um zurückzukehren ein Versprechen:

Versprechen Ressourcen:
- http://egghead.io/lessons/angularjs-promises
- http://docs.angularjs.org/api/ng.$q
In den Dienst:
```
leagueManager.service("teamsService", function($http){
    var deferred = $q.defer();
    $http.get('data/teams.json').then(function(data) {
        deferred.resolve(data);
    });
    this.getTeams = function(){
        return deferred.promise;
    };
});
```
Dann im controller:
```
$scope.team = {};

var promise = teamsService.getTeams();
promise.then(function(data) {
    $scope.teams = data;
});
```
Hallo @hajpoj vielen Dank für Ihre Antwort und ich habe gelesen, über latente und Versprechungen, aber es hat nicht geholfen mich so weit. Ich weiß nicht, was ich falsch mache. Bitte sehen, was Tue ich jetzt wieder ganz unten meine Frage.
Hey, ich lese über deine Bearbeitung. Es scheint, Sie bekommen jetzt die Daten, aber es lädt in später. Dies ist als erwartet. Soweit ich weiß, Sie nicht bekommen die Daten zurück wenn Sie rufen Sie teamService.getTeams() (cuz $http-Aufrufe sind asynchron), es sei denn, Sie machen es zu einem blockieren von anrufen, die Sie nicht wollen, tun das sowieso. Der controller wird initialisiert, und du definitiv nicht wollen, zu sperren und zu warten, bis die Daten. Der rest der Seite wird nicht geladen. Was seltsame Effekte, sind Sie in Betrieb?
hey hajpoj vielen Dank für Ihre Antwort, aber ich bin ein bisschen enttäuscht. Nach allem, was ich dachte, dass ist der Grund, warum wir uns mit Versprechungen und aufgeschoben, so dass wir bekommen können die Objekte in einer Zeit, die wir uns wünschen? Wenn das asynchrone Verhalten ist die gewünschte ein, wie kann dann jede Anwendung wird in der Lage sein, um eine Liste der Dateien, die abgerufen werden in Echtzeit vom back-End-Dienst über ein $http.Holen Sie sich nennen? In meinem Fall, die Liste ist teams , ich will angezeigt, wenn der Benutzer lädt die Seite zum ersten mal. Anf für Ihre Informationen, ich habe immer genau das gleiche Verhalten, ohne das Versprechen und die latenten.
Was ich meinte war - warum brauchen wir sogar nutzen verspricht und die latente, wenn das gleiche Verhalten konnte ich erzielen mit einfachen $http.Holen Sie sich nennen?
wenn die Daten wieder richtig, aber nicht zeigen, bis es klingt wie es sein könnte ein data-binding-Problem. Vielleicht überprüfen Sie Ihre html um sicherzustellen, dass der mark-up ist richtig und entspricht Ihrer javascript-Datenstruktur. Um sicher zu sein, Ihre Daten ein json-Objekt korrekt?

InformationsquelleAutor hajpoj

Dieser sollte funktionieren:

myApp.factory('mainFactory',['$http',function($http){

var mainFactory = {};

mainFactory.getRandomUser = function(){
    var promise;
    if(!promise){
        promise = $http.get('http://api.randomuser.me/').success(function(d){
            return d;   
        });
        return promise;
    }
};

mainFactory.getRandomImage = function(){
    var promise;
    if(!promise){
        promise = $http.get('http://lorempixel.com/400/200/').success(function(d){
            return d;   
        });
        return promise;
    }
};

return mainFactory;

}]);

InformationsquelleAutor Yaniv Vova Alterman

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.