observables - Acceso angular a datos de múltiples llamadas http: cómo resolver las promesas

promesas angular 4

Question

Me estoy quedando atrapado en algo que creo que debería ser sencillo. Necesito tomar datos de tres llamadas ajax diferentes, combinar y procesar las tres y mostrar la matriz resultante al usuario.

En su forma más simple mi código se ve así:

function giftControler ($scope, $http) {
  var names = $http.get("names.json"),
      naughty = $http.get("naughty.json"),
      nice = $http.get("nice.json");

Entiendo que mis variables están asignadas a promesas, no a resultados reales, y que la solicitud http se ha pasado a la cola de eventos. Si sigo estos con enunciados ejecutables, estas variables no estarán definidas. No entiendo cómo esperar a que se cumplan estas promesas para continuar procesándolas.

Lo que me gustaría hacer es agregar inmediatamente el código:

      for (var i=0; i<names.length; i++){
        for (var j=0; j<nice.length; j++){
          if (names[i] === nice[j]){
            names[i] = names[i] + "--Yay!!";
          };
        };
      };                
      $scope.kids = names;

El problema es que no puedo trabajar fuera de las promesas como si fueran arreglos resueltos. Javascript verá estas declaraciones justo después de las llamadas http e intentará ejecutarlas inmediatamente, aunque las promesas no se hayan resuelto.

Donde me quedo atascado es que la api $ http me está dando un objeto de promesa con tres funciones: error , success y then . No estoy seguro de qué hacer con eso en este caso. Necesito una función de éxito único para los tres. Necesito resolver los tres, luego procesar los datos en cada uno y luego asignar el resultado a un modelo angular.

Estoy seguro de que me falta algo obvio, pero ¿alguien tiene alguna sugerencia? En mi trabajo real tengo varias llamadas ajax para múltiples fuentes de datos y mucho procesamiento (comparación de valores, clasificación, concatenación, etc.) para llegar a una buena recopilación de datos, pero no puedo pasar este problema.

Gracias,

Answer 1

Puedes usar la función de $ q ''todo'':

function giftControler ($scope, $http, $q) {
  var names = $http.get("names.json"),
      naughty = $http.get("naughty.json"),
      nice = $http.get("nice.json");
  $q.all([names, naughty,nice]).then(function(arrayOfResults) { 
      ... This callback would be called when all promised would be resolved
    });

De esta manera es un poco más limpio.

Aquí hay un enlace a la docementación: http://docs.angularjs.org/api/ng.$q