Writing callback function in angular js

Question

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

You should probably move this question over to CodeReview because your code has more problems than just chaining promises. — georgeawg
– georgeawg, Commented Jan 6, 2016 at 4:54

Community · Accepted Answer · 2017-05-23 11:52:00Z

1

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.

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Jan 6, 2016 at 4:11

Shayou

443 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

georgeawg · Accepted Answer · 2016-01-06 04:21:01Z

1

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

answered Jan 6, 2016 at 4:21

georgeawg

49k13 gold badges78 silver badges98 bronze badges

4 Comments

Sanjay Over a year ago

Even now, old data ids persisted after hitting 2nd restful service i.e.,after hitting getArtData() also, getToc() data is there.

georgeawg Over a year ago

I need to see the code you use for chaining. Also use a factory provider instead of a service provider for the getTocService provider.

Sanjay Over a year ago

I am pretty new to angular. So I am not much aware of factory provider. I will try googling it out.. Thank you :)

georgeawg Over a year ago

Just change app.service( to app.factory( and let me know if that helped.

Collectives™ on Stack Overflow

Writing callback function in angular js

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest