CODEWITHSUNDEEP
javascriptangularjsrest
Sanjay
Sanjay

Reputation: 443

Writing callback function in angular js

I have a page where I need to hit 2 restful web service calls. 1st rest call is successful and I am getting back the data. After hitting 2nd service, still the data of 1st call is persisted in the variable. So using call back method is the solution for this?If so, how to write callback method in angularjs way?

Here is my code.

app.directive('collection', function() {
    return {
        restrict: "E",
        replace: true,
        scope: {
            collection: '=',
            articleData: '=',
            articleContent: '='
        },
        template: "<ul><member ng-repeat='member in collection' member='member' article-data='articleData' article-content='articleContent'></member></ul>"
    }
});

app.directive('member', function($compile,$http,getTocService) {
    return {
        restrict: "A",
        replace: true,
        scope: {
            member: '=',
            articleData: '=',
            articleContent: '='
        },
        template: "<div><li><a href='#' ng-click='getContent(member.itemId)'>{{member.title}}</a></li></div>",
        link: function(scope, element, attrs) {
            scope.getContent = function(itemId) {
                    var art = getTocService.getArtData(itemId);
            }

            if (angular.isArray(scope.member.tocItem)) {
                if (scope.member.hasChildren == "true") {
                    for (var i = 0; i < scope.member.tocItem.length; i++) {
                        if (scope.member.tocItem.title) {
                            scope.member.tocItem.title.hide = true;
                        }
                    }
                }
                element.append("<collection collection='member.tocItem'></collection>");    
                $compile(element.contents())(scope)
            }
        }
    }
});


app.controller('apdController', function($scope, getTocService,$location) {
    var bookId = $location.search().id;
    var sampdata = getTocService.getToc(bookId);
    $scope.tasks =sampdata;
//  $scope.tasks = data;

//    var artData = getTocService.getArtData('PH1234');
//    $scope.articleContent = artData;
});

app.service(
        "getTocService",
        function( $http, $q ) {
            return({
                getToc: getToc,
                getArtData: getArtData
            });

            function getToc(bookIdvar) {
                var request = $http({
                    method: "post",
                    url: "http://10.132.241.41:8082/apdpoc/services/ApdBookService/getTOC",
                    params: {
                        action: "post"
                    },
                    data: {
                        getTOCCriteria:{
                        bookId: bookIdvar
                        }
                    }
                });
                return( request.then(handleSuccess,handleError));
            }

            function getArtData(itemId) {
                var request = $http({
                    method: "post",
                    url: "http://10.132.241.41:8082/apdpoc/services/ApdBookService/getArticle",
                    params: {
                        action: "post"
                    },
                    data: {
                        getArticleCriteria:{
                        articleId: itemId,
                        locale: "en_US"
                        }
                    }
                });
                alert(data);
                return( request.then(handleSuccess,handleError));
            }
            function handleSuccess(response){
                return (response.data);
            }

            function handleError( response ) {

                if (
                    ! angular.isObject(response.data) ||
                    ! response.data.message
                    ) {
                    return($q.reject("An unknown error occurred."));
                }
                return($q.reject(response.data.message));
            }

        }
);

Here, "data" is the variable I am using in both the calls to hold the response data. And I am calling 2nd service "getArtData" from

 var art = getTocService.getArtData(itemId);

Upvotes: 0

Views: 167

Answers (2)

georgeawg
georgeawg

Reputation: 48968

Your getTocService returns promises and you need to chain the two promises.

var bookId = $location.search().id;
var sampdataPromise = getTocService.getToc(bookId);

sampdataPromise.then( function(data) {
    $scope.tasks = data;
    //return next promise for chaining
    return getTocService.getArtData(data.itemId);
}).then (function (artData) {
    $scope.articleContent = artData;
}).catch (function (error) {
    //log error
});

Upvotes: 1

Shayou
Shayou

Reputation: 44

You should strongly consider using promises. Promises allow chaining and are a lot better than callback hell. The keyword here is using then.

This SO post explains it better: Processing $http response in service

Hope this is helpful to you.

Upvotes: 1

Related Questions