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](http://codereview.stackexchange.com/questions/tagged/angular.js) because your code has more problems than just chaining promises. — georgeawg, Jan 06 '16 at 04:54

score 1 · Answer 1 · edited May 23 '17 at 11:52

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 '17 at 11:52

Community

1
1

answered Jan 06 '16 at 04:11

Shayou

19
3

score 1 · Answer 2 · answered Jan 06 '16 at 04:21

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 06 '16 at 04:21

georgeawg

48,608
13
72
95

Even now, old data ids persisted after hitting 2nd restful service i.e.,after hitting getArtData() also, getToc() data is there. – Sanjay Jan 06 '16 at 04:27
I need to see the code you use for **chaining**. Also use a **factory provider** instead of a **service provider** for the `getTocService` provider. – georgeawg Jan 06 '16 at 04:33
I am pretty new to angular. So I am not much aware of factory provider. I will try googling it out.. Thank you :) – Sanjay Jan 06 '16 at 04:36
Just change `app.service(` to `app.factory(` and let me know if that helped. – georgeawg Jan 06 '16 at 05:10

Writing callback function in angular js

2 Answers2