AngularJS: Function inside directive is not returning data

Question

Here is my directive

angular.module('categoryListingDirective', []).directive('categoryListing', function (Category) {
    return {
        restrict: 'A',
        replace: true,
        require: true,
        scope: true,
        templateUrl: '../static/partials/categoryListingForm.html',
        link: function (scope, element, attrs) {
            var categories = undefined;

            var getCategories = function () {
                if (categories === undefined) {
                    categories = Category.query(function(){});
                }
                return categories;
            };

            var allParentCategories = function () {
                console.log('getting parent categories');
                return _.uniq(getCategories(), function (category) {
                    console.log('category:', category);
                    return category.parent;
                });
            };
            console.log('categories:', getCategories());
            console.log('allParentCategories:', allParentCategories());
        }
    }
});

When I try to run this on my browser, I see the following in console log

categories: 
[$promise: Object, $resolved: false]
 categoryListing.js:25
getting parent categories categoryListing.js:19
allParentCategories: []

I am pretty sure this should not be empty.

Question

Is it because of async nature of calls getting fired?
How do I fix it, what are the recommendations?

Thanks

UPDATE

The Category resource looks like

angular.module('categoryService', ['ngResource']).factory('Category', function($resource) {
  return $resource('categories/:categoryId', {categoryId: '@uuid'});
});

could you please show your Category resource? At a glance, Category is returning a promise that you need to resolve in your $http success callback. When you call getCategories() you'll be able to call getCategories().then(function(data) { ... }) may want to read about deferred objects ala docs.angularjs.org/api/ng/service/$q — tester
– tester, Commented May 16, 2014 at 5:40
@daydreamer the query call is asynchronous. I think the syntax might be counter-intuitive as pointed out in this question stackoverflow.com/questions/11966252/… — miqh
– miqh, Commented May 16, 2014 at 5:46

Marc Kline · Accepted Answer · 2014-05-16 05:56:18Z

3

(Marked as community wiki since the answer is really in the comments)

This might do the trick and help you to understand the way to handle promises returned by $resource:

var allParentCategories = function () {
    console.log('getting parent categories');
    var ret = [];
    getCategories.then(function(results){
        ret = _.uniq(results.data, function (category) {
            console.log('category:', category);
            return category.parent;
        });
    });
    return ret;
};

I know that it's less pretty than just directly returning the results from _.uniq, but that is life in the current state of JS!

Collectives™ on Stack Overflow

AngularJS: Function inside directive is not returning data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related