AngularJS ngRepeat doesn't work with object from API

Question

I'm trying to display this object, just that simple ... but when I reload the page, nothing happend, blank, the object is perfect because is in the console..

Angular

var store = angular.module('storeApp', []);

store.controller('CategoriesNProducts', ['$scope', function($scope) {
    $scope.moltin = new Moltin({publicId: 'wA7eKb9jzqDvNI1V0HKIeGl9osh3FWcAKzOtZfcj'});

    $scope.get_categories = function() {
        $scope.moltin.Authenticate(function () {
            $scope.moltin.Category.Tree({status: '1'}, function (tree) {
                return tree;
            });
        });
    };

    $scope.categories = $scope.get_categories();
}]);

View

<div ng-app="storeApp">
    <h1>Store</h1>
    <section id="categories" ng-controller="CategoriesNProducts">
        {{categories.length}}
        <div ng-repeat="(key, value) in categories">
            <div id="{{value.description}}"></div>
            {{ value }}
        </div>
  </section>
</div>

levi · Accepted Answer · 2015-03-12 15:34:47Z

4

Sure your Category.Tree function, is async, so, you can't assign "async data" and expect it works as normal assignment. You need to assign $scope.categories in your async function callback.

It should be

 $scope.get_categories = function() {
        $scope.moltin.Authenticate(function () {
            $scope.moltin.Category.Tree({status: '1'}, function (tree) {
               $scope.categories  = tree;
               $scope.apply(); // Use this if Category.Tree came from external lib
              //Using apply, you tell to angularjs that $scope have been change by external lib
            });
        });
    };

 $scope.get_categories();

edited Mar 12, 2015 at 15:34

answered Mar 12, 2015 at 3:16

levi

22.8k7 gold badges79 silver badges76 bronze badges

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

5 Comments

dacastro4 Over a year ago

You're right, is async function but still nothing. After this call $scope.get_categories(); I should be able to call categories in the ng-repeat, isn't it?

levi Over a year ago

@dacastro4 try to print out categories in your html {{categories}} to check if it was assigned correctly.

dacastro4 Over a year ago

still nothing ): I put {{categories}} inside the controller but outside the ngrepeat and nothing, then i put inside and nothing. There where you are telling me, right?

dacastro4 Over a year ago

a friend helped me with this. He told me that I have to use $scope.$digest() to update the $scope variable and It works. Thanks anyways.

levi Over a year ago

@dacastro4 Ahhh that is because your Category.Tree is a third party lib function, you are not requesting data using normal $http module from angular. An the way to tell angularjs that a third party lib had change the $scope is using $scope.apply() // don't use $digest.

Collectives™ on Stack Overflow

AngularJS ngRepeat doesn't work with object from API

Angular

View

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Angular

View

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related