CODEWITHSUNDEEP
angularjs
serge
serge

Reputation: 15239

Pass parameters from $get promise response to $scope

I do a ajax (get) request and obtain a promise with json data in a angular "jobList" service.

Then I update the scope with the obtained data. But my problem is that to update a scope variable 'X' I need to create a function per variable "readX" (see bellow).

Is there a way to add parameters, like in the last function in the following code?

app.controller("JobListController", ['$scope', '$timeout', 'jobList',
    function ($scope, $timeout, jobList) {
        var readList = function (response) {
            if (response) {
                $timeout(function () {
                    $scope.list = response;
                    $scope.$apply();
                });
            }
        };
        var readFamilies = function (response) {
            if (response) {
                $timeout(function () {
                    $scope.allFamilies = response;
                    $scope.$apply();
                });
            }
        };
        var readRegions = function (response) {
            if (response) {
                $timeout(function () {
                    $scope.allRegions = response;
                    $scope.$apply();
                });
            }
        };
        // !!! ----- HERE ------------- !!!
        var readSomething = function (response, something) {
            if (response) {
                $timeout(function () {
                    $scope[something] = response;
                    $scope.$apply();
                });
            }
        };

        jobList.get().then(readList);
        jobList.getAll("allFamilies").then(readFamilies);
        jobList.getAll("allRegions").then(readRegions);
    }]);

Upvotes: 0

Views: 119

Answers (3)

gaurav5430
gaurav5430

Reputation: 13917

you could save the required property in a scope variable, before getting the data.

Something like this:

$scope.property = "list";
jobList.get().then(readSomething);

and your function would now become:

var readSomething = function (response) {
            if (response) {
                $timeout(function () {
                    $scope[$scope.property] = response;
                    $scope.$apply();
                });
            }
        };

P.S:

I guess you can also use closures to do something like this:

var readSomething = function (something) {
            return function(response){
                if (response) {
                    $timeout(function () {
                        $scope[something] = response;
                        $scope.$apply();
                    });
                }
           }
        };

Upvotes: 1

Duncan
Duncan

Reputation: 95732

For a start you could simplify those callback functions: provided the callback happens inside angular (and it you're using $http it will) you don't need the $timeout call nor the $scope.$apply() call. Also you should write your service to only succeed if it returns data, reject the promise if it fail;s and that way you don't need the if So each callback could just be the assignment.

If you are making multiple calls that return promises, can you collapse the calls together?

$q.all([jobList.get(), jobList.getAll("allFamilies"), jobList.getAll("allRegions")])
.then(([list, families, regions]) => {
    $scope.list = list;
    $scope.allFamilies = families;
    $scope.allRegions = regions;
});

I used es6 syntax here: it's well worth setting up your build chain to use something like babeljs so you can use the shorthand notation for simple callbacks.

If you really want to make the calls separately (they still evaluate in parallel) you can write a factory to generate the callbacks:

function assignToScope(name) {
    return success;

    function success(data) {
        $scope[name] = data;
    }
}
jobList.get().then(assignToScope('list'));
jobList.getAll("allFamilies").then(assignToScope('allFamilies'));
jobList.getAll("allRegions").then(assignToScope('allRegions'));

Upvotes: 1

Jitendra
Jitendra

Reputation: 1

Try this:

    jobList.get().then(function (response) {
    readSomething(response);
    });

And function readSomething can have response only as in input.

Upvotes: 0

Related Questions