Home / Questions / 199431
Accepted
zerokira
Asked: 2020-09-26 12:28:32 +0800 CST 2020-09-26 12:28:32 +0800 CST

How can I get a value after a $HTTP request in AngularJS

  • 772

I am trying to make a console.log()of a arraythat fills when I make the request httpbut prints empty, it is possible to make it execute the entire function of the first http $scope.users();and then output the result to the console.
PS : console.logI can do it within the request httpbut it is not what I want, is there any other way, promises or something similar?

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>

javascript

3 Answers

  1. Best Answer

    For the problem I had, I had to use the $qangularJs call service to handle the promises and it was just what I was looking for, there are several ways to make promises... In the function we make use of the service as you can see below:
    $scope.users();$q

    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>

    • 2

  2. I have actually programmed very little with Angular JS, but the solution that I propose is the following.

    As you have said, do it with promises and not advance until you have the data.

    Here the example.

    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();

});

    Here in case you want to try it -> Link

    • 0

  3. First of all, I recommend separating the controller from the services, so that you have a better organization of the code and you can reuse it. In this case you can place the controller something like this

     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;
            })
        }

    }]);

    Now create the services.js file, or whatever you want to call the service

    //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;
}]);

    You can also do it in the same file. It would be something like this

    $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;
};

    Remember that you must add the new file in the index.

    I will gladly answer any questions. I hope I've helped.

    • 0