$ http.get verursacht infinites Aufrufe (und Fehler) bis Computer abstürzt

Question

Ich möchte ein Array austauschen und eine JSON-Datei erhalten, aber weiß nicht, warum noch wo, wo es etwas falsch in meinem Code ist (der Service/Controller-Teil ohne eine HTTP-Anfrage funktioniert jedoch).

inkriminierten Code

(function() { 
    (function() { 
    var JsonsService; 
    JsonsService = function($http) { 
     var pizze; 
     pizze = []; 
     return { 
     getPizze: function() { 
      $http.get('data/pizze-it.json').then(function(pizze) { 
      pizze = pizze.data; 
      }); 
     } 
     }; 
    }; 
    JsonsService.$inject = ['$http']; 
    angular.module('myApp').factory('JsonsService', JsonsService); 
    })(); 

}).call(this); 

(function() { 
    (function() { 
    var JsonsCtrl; 
    JsonsCtrl = function(JsonsService) { 
     var self; 
     self = this; 
     self.list = function() { 
     return JsonsService.getPizze(); 
     }; 
    }; 
    JsonsCtrl.$inject = ['JsonsService']; 
    angular.module('myApp').controller('JsonsCtrl', JsonsCtrl); 
    })(); 

}).call(this); 

Plnkr

I den gesamten Codeblock aus app.js entfernt, die diesen Fehler verursacht (Service und Controller) und platziert es in DontLoadThis.js (es gibt einige Markup, um wieder in main.html zu setzen)

Answer 1

Dies ist nicht unbedingt die definitive Antwort, aber es gibt ein paar Dinge, die ich bemerkt habe, die falsch erscheinen.

Beginnend mit Ihrem JsonsService:

JsonsService = function($http) { 
    var pizze; 
    pizze = []; 
    return { 
     getPizze: function() { 
      $http.get('data/pizze-it.json').then(function(pizze) { 
       pizze = pizze.data; 
      }); 
     } 
    }; 
}; 

Sie eine Variable pizze initialisiert, sondern auch die Callback-Variable pizze im $http.get(). Stattdessen schlage ich vor:

var pizze = []; 

... 

$http.get('data/pizze-it.json').then(function(json_response) { 
    pizze = json_response.data; 
}); 

Dies ist jedoch entlassen durch die zweite Ausgabe: JsonsService.getPizze() nicht wirklich etwas zurück. Ein möglicher Weg wäre, das Versprechen von getPizze() zurückzugeben und mit dem Ergebnis im Controller umzugehen.

// in service 
return { 
    getPizze: function() { 
     return $http.get('data/pizze-it.json'); 
    } 
}; 

// in controller 
JsonsCtrl = function(JsonsService) { 
    var self; 
    self = this; 
    self.list = []; 

    JsonsService.getPizze().then(function (json_response) { 
     self.list = json_response.data; 
    }); 
};