2

Estoy intentando hacer un console.log() de un array que lleno cuando hago la petición http pero imprime vació, es posible hacer que ejecute primero toda la función del http $scope.users(); y luego salga en la consola el resultado.
PD: El console.log lo puedo hacer dentro de la petición http pero no es lo que deseo, hay alguna otra forma, promesas o algo parecido?

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $filter) {

    $scope.users = function() {
        $scope.arrItem = [];
        $http.get('https://jsonplaceholder.typicode.com/todos').then(function(res) {
            $scope.users = res.data;
            $filter('filter')($scope.users, function(value, index, array){
                if (value.userId == 1) {
                    $scope.arrItem.push(value);
                };                
            } , true);
        });
    }

    $scope.test = function() {
        $scope.users();
        console.log($scope.arrItem);

    }
    $scope.test();

});
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="user in arrItem">
            {{ user }}
        </div>
    </body>

</html>

1
  • He logrado después de ciertos días de investigación y ayudas, una solución que puede servir para las diferentes personas que pertenecemos a la comunidad, edito mi pregunta con la respuesta.
    – zerokira
    Commented el 8 oct. 2018 a las 13:28

3 respuestas 3

2

Para el problema que tenia, tuve que usar el servicio de angularJs llamado $q para manejar las promesas y era justo lo que andaba buscando, existen varias maneras de hacer promesas...
En la función $scope.users(); hacemos uso del servicio $q como se puede ver a continuación:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $filter, $q) {

    $scope.users = function() {
        return $q(function(resolve,reject) {
            $scope.arrItem = [];
            $http.get('https://jsonplaceholder.typicode.com/todos').then(function(res) {
                $scope.users = res.data;
                $filter('filter')($scope.users, function(value, index, array){
                    if (value.userId == 1) {
                        $scope.arrItem.push(value);
                    };                
                } , true);
                resolve();
            });
        });
    }

    $scope.test = function() {
        $scope.users().then(function(){
            console.log($scope.arrItem);    
        });     
    }
    $scope.test();

});
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="script.js"></script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <div ng-repeat="user in arrItem">
            {{ user }}
        </div>
    </body>

</html>

0

Realmente he programado muy poquito con Angular JS, pero la solución que te planteo es la siguiente.

Como tu has dicho hacerlo con promesas y no avanzar hasta no tener los datos.

Aquí el ejemplo.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http, $filter) {

    $scope.users = async function() {
        $scope.arrItem;
        //Nos guardamos la respuesta 
        let response = await $http.get('https://jsonplaceholder.typicode.com/todos')
        //Recogemos nuestros datos

        let data = await response.data

        //Asignamos
        $scope.arrItem = data

    }

    $scope.test = async function() {
      //Esperamos hasta que acabe
      await $scope.users();

      //Mostramos los datos
      for(let a of  $scope.arrItem) {
        console.log(a.title)
      }

    }
    $scope.test();

});

Aquí por si quieres probarlo -> Link

3
  • Muchas gracias por tu solución planteada, pero necesito una solución con la estructura de mi pregunta.
    – zerokira
    Commented el 26 sept. 2018 a las 13:46
  • de hecho el then es una espera de la promesa Commented el 31 oct. 2018 a las 13:51
  • Estoy de acuerdo conmigo, pero para mi personalmente es más claro y más lipio el codigo aparte de que funcione.
    – MitaCloud
    Commented el 31 oct. 2018 a las 15:50
0

primero que todo, te recomiendo separar el controlador de los servicios, para que tengas mejor organizado el código y puedas reutilizarlo. En este caso puedes colocar el controlador algo así

 app.controller('myCtrl',['$scope','$state','myCtrlService',
    function($scope,$state,myCtrlService) {

        $scope.users = function(){
            url = "https://jsonplaceholder.typicode.com/todos";
            //si quieres enviar data 
            var data = {};
            //haces una promesa
            myCtrlService.myCtrlService(data,url).then(function(promise){
                //devuele el resultado deseado
                var result = promise.data;
            })
        }

    }]);

Ahora creas el archivo services.js, o como quieras llamar al servicio

//aquí inyectas el servicio que tiene como nombre myCtrlService
 app.factory('myCtrlService',['$http', function($http){
    //Objeto que te devolera la info del servicio que vas a consumir
    var services = {};

    services.myCtrlService = function(data,URL){
//consume el servicio api rest enviando la data y URL, si no tienes que enviarle data, le envias solo el parametro dela url
        var promise = $http.get(window.urlService + URL,data)
            .success(function(data){
                //devuelve la información del servicio web
                return data;
            })
            .error(function(err){
                console.log(err);
            });
        return promise;
    };
    return services;
}]);

Puedes hacerlo tambien en el mismo archivo. Quedaría algo así

$scope.users = function(){
    $scope.arrItem = [];
    serviceMyCtrl().then(function(promise){
        //devuele el resultado deseado
        var result = promise.data;
        console.log(result);
    })
}

serviceMyCtrl = function(){
//consume el servicio api rest enviando la data y URL, si no tienes que enviarle data, le envias solo el parametro dela url
    var promise = $http.get("https://jsonplaceholder.typicode.com/todos")
        .success(function(data){
            //devuelve la información del servicio web
            return data;
        })
        .error(function(err){
            console.log(err);
        });
    return promise;
};

Recuerda que debes añadir el nuevo archivo en el index.

cualquier duda con gusto la atenderé. Espero haberte ayudado.

2
  • No puede ser de otra forma sin tener que crear servicio, se puede hacer con la misma estructura como realice la pregunta?.
    – zerokira
    Commented el 26 sept. 2018 a las 13:45
  • Puedes crear el servicio dentro del mismo archivo. Revisa que actualicé el código. Es la misma estructura. Espero te sirva. Commented el 26 sept. 2018 a las 15:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.