CODEWITHSUNDEEP
javascripthtmlscopeangularjs-scope
beltran9c
beltran9c

Reputation: 25

Multiple $http.get operatios and save the information in one $scope variable

I need to do four $http.get call and I need to send returned $scope variable to the one HTML to print all the information. In the moment I have the next code in JS:

(function (ng) {

var mod = ng.module("serviciosAdminModule");

mod.controller('serviciosAdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get("api/hoteles").then(function (response) {
            $scope.serviciosHotelesRecords = response.data;
        });
    }]);
mod.controller('serviciosAdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get("api/paseos").then(function (response) {
            $scope.serviciosPaseosRecords = response.data;
        });
    }]);
mod.controller('serviciosAdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get("api/aseos").then(function (response) {
            $scope.serviciosAseosRecords = response.data;
        });
    }]);
mod.controller('serviciosAdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $http.get("api/entrenamientos").then(function (response) {
            $scope.serviciosEntrenamientosRecords = response.data;
        });
    }]);

})(window.angular);

In the HTML I have the next:

<tr ng-repeat="servicio in serviciosAdminRecords">
    <td id="{{$index}}-id" class="parrafoscards" style="font-size: 16px">
        <a ui-sref="servicioAdminDetail({servicioId: servicio.id})">{{servicio.id}}</a>
    </td>...

In the HTML I ask for serviciosAdminRecords that is the $scope variable where I want to put all the .get data

Upvotes: 1

Views: 32

Answers (2)

Amar Kaygude
Amar Kaygude

Reputation: 287

If your response.data is an array of object then initialize serviciosPaseosRecords as array.

$scope.serviciosHotelesRecords = [];

instead of assigning response.data to serviciosPaseosRecords

 $scope.serviciosAseosRecords = response.data

Concat response.data with existing serviciosAseosRecords array.

$scope.serviciosAseosRecords = $scope.serviciosAseosRecords.concat(response.data)

Upvotes: 0

see sharper
see sharper

Reputation: 12045

You probably need to chain the promises in order to add all the responses together into the one array. Get rid of all the different controllers - they will have separate scopes - and just have the one controller, making sure it is being used in the view by using ng-controller='serviciosAdminCtrl' as an attribute in your view.

mod.controller('serviciosAdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.serviciosAseosRecords = [];
        $http.get("api/hoteles").then(function (response) {
            $scope.serviciosAseosRecords = $scope.serviciosAseosRecords.concat(response.data);
            $http.get("api/paseos").then(function (response) {
                $scope.serviciosAseosRecords = $scope.serviciosAseosRecords.concat(response.data);
                $http.get("api/aseos").then(function (response) {
                    $scope.serviciosAseosRecords = $scope.serviciosAseosRecords.concat(response.data);
                    $http.get("api/entrenamientos").then(function (response) {
                        $scope.serviciosAseosRecords = $scope.serviciosAseosRecords.concat(response.data);
                    });
                });
            });
        });
    }]);

Upvotes: 1

Related Questions