angular.forEach Schleife mit $ http.get

Question

Ich möchte ein Array erstellen, einige Objekte enthält

Erstens bekomme ich eine erste Anordnung von dem Server eine Liste von Geräten wie diese

[ 
{accountID : "sysadmin",deviceID : "123"}, 
{accountID : "sysadmin",deviceID : "3"} 
    ... 
    ] 

Dann enthält ich schaffe eine zweite Anordnung einige Objekte enthält, die jedes Objekt ein Gerät darstellen (deviceID) und enthält ein Array von Ereignissen dieser Vorrichtung, die ich von dem Server erhalten

ich tun, um eine Schleife auf dem ersten Array wie folgt:

$scope.myArrayofDevices = []; 

angular.forEach(response, function(device){ 

    $scope.myObject={}; 

    $scope.myObject.device = device.deviceID; 

    $http.get('events') 
     .success(function (data) { 

     $scope.myObject.events = data;   

     }); 


     $scope.myArrayofDevices.push($scope.myObject); 

    });//end for loop 

Ich erhalte Ereignisdaten vom Server richtig.

Aber, wenn ich $scope.myArrayofDevices Array überprüfen erhalte ich ein das erste Objekt nur mit dem deviceID und kein Ereignis-Array und das zweite Objekt mit deviceID und Ereignisse Array korrekt

wie folgt aus:

[ 
{deviceID : 123, events:}, 
{deviceID : 3 , events : array[5]} 
] 

Wie kann ich dieses Problem lösen?

Bitte beachte, dass ich versuche, ein Array zu $scope.myObject.events zuweisen es funktioniert perfekt das Problem, eine Schleife mit $ http verwendet

Answer 1

können Sie $q.all() verwenden, um eine Reihe von Versprechungen zu lösen und das Endergebnis

angular.module('app', []); 

angular.module('app').controller('ExampleController', ['$scope', '$q', function($scope, $q) { 

    $scope.myArrayofDevices = []; 

    $scope.getDeviceObject = function(deviceId) { 
     return $http.get('events/' + deviceId).then(function(deviceEvents) { 
      return { 
       "device": deviceId, 
       "events": deviceEvents 
      }; 
     }); 
    } 

    var promises = []; 

    angular.forEach(response, function(device) { 
     promises.push($scope.getDeviceObject(device.deviceID)); 
    }); 

    /* 
    * Combines multiple promises into a single promise 
    * that will be resolved when all of the input promises are resolved 
    */ 
    $q.all(promises).then(function(devices) { 
     $scope.myArrayofDevices = $scope.myArrayofDevices.concat(devices); 
    }); 


}]);  

Answer 2

Sache ist, dass Sie $scope.myObject auf ein neues Objekt zuweisen, bevor Rückruf ausgelöst wird und zugeordnet Ereignisse mit dem alten . Beide Callbacks weisen also demselben Objekt Eigenschaften zu. Sie könnten einfach den gesamten Code in Callback setzen.

Answer 3

1. Create a service: 

    function DataService($http, appEndpoint){ 
     return { 
      getLists: getData 
     } 

     function getData(){ 
      return $http.get(appEndpoint + 'lists') 
     } 
     } 

2. Create controller: 

function ListsController(DataService){ 
    var self = this; 
    self.data = null; 
    DataService.then(function(response){ 
     self.data = response.data; 
    }); 

    // Here manipulate response -> self.data; 
} 

Answer 4

Zunächst einmal erhalten: wie Carnaru Valentin sagte, sollten Sie einen Dienst erstellen Sie Ihre $http Anrufe wickeln.

Zweitens bekomme ich Ihren $http.get('events') Anruf nicht. Sie übergeben keine Parameter (DeviceID oder whatnot).

Gibt es eine Liste aller Ereignisse für jedes Gerät zurück? Für ein bestimmtes Gerät?

Wenn Sie nur vergessen, einen Parameter für die Abfrage hinzuzufügen: hier ist eine Lösung, die funktionieren könnte:

var promises = response.map(function (device) { 
    return $http.get('events/' + device.deviceID) 
    .then(function (data) { 
     return { 
     device: device.deviceID, 
     events: data 
     }; 
    }); 
}) 

$q.all(promises) 
    .then(function (devices) { 
    $scope.myArrayofDevices = $scope.myArrayofDevices.concat(devices); 
    // alternatively: $scope.myArrayofDevices = devices; 
    });