Angular $scope object not updating in view

Question

I have a large object of products that is filtered based on categories. When a filter is selected, the getAllProducts() function I have is called with that filter. This function also sets the $scope.products which I have an ng-repeat for in an <li> in my view.

With each category selected, I am console logging the length of the returned products object, and see that the object correctly updates, but my view does not change. Does anyone see what's wrong here?

view:

  <li ng-repeat="product in products track by $index">
      <img ng-model="category" class="{{product.custom.category_code}}" src="/img/product-all/{{product.custom.sku}}PF1.png">
      <p class="name">{{product.custom.name1}}</p>
      <p class="price">{{product.price}}</p>
  </li>

  <li class='has-sub first-menu'><a href='/scroll'><span>Filter By Category:</span></a>
     <ul class="sub-menu">
        <li ng-repeat="cat in filterCategory">
           <a href='/scroll' data-category="all" ng-click="setFilter('category', cat)">
              <span>{{cat}}</span>
           </a>
        </li>
     </ul>
  </li>
  <li class='has-sub first-menu'><a href='/scroll'><span>Filter By Color:</span></a>
     <ul class="sub-menu">
        <li ng-repeat="color in filterColor">
           <a href='/scroll' data-category="all" ng-click="setFilter('color', color)">
              <span>{{color}}</span>
           </a>
        </li>
     </ul>
  </li>
  <li class='has-sub first-menu'><a href='/scroll'><span>Filter By Season:</span></a>
     <ul class="sub-menu">
        <li ng-repeat="season in filterSeason">
           <a href='/scroll' data-category="all" ng-click="setFilter('season', season)">
              <span>{{season}}</span>
           </a>
        </li>
     </ul>
  </li>

controller:

    $scope.setFilter = function(type, filter){
        type = type;
        filter = filter;
        getProducts(type, filter);
    }
    var getProducts = function(type, filter){
        productFactory.getAllProducts()
            .then(function(){
                $timeout( function(){
                    var allProducts = productFactory.products;
                    var filterProducts;
                    switch (type){
                        case "category":
                            filterProducts = $filter('filter')(allProducts, {custom:{category_code:filter}});
                            break;
                        case "color":
                            filterProducts = $filter('filter')(allProducts, {custom:{color_code:filter}});
                            break;
                        case "season":
                            filterProducts = $filter('filter')(allProducts, {custom:{season:filter}});
                            break;
                        default:
                            filterProducts = productFactory.products;
                    }
                    $scope.products = _.uniq(filterProducts, function(p){ return p.custom.sku; });
                    console.log($scope.products.length);
                }, 700);
            });
    }

factory:

var getAllProducts = function(){
        return $http.get('/api/scroll?page='+pageNumber)
            .then(function(response) {
                angular.extend(products,response);
                for (var i = products.data.results.length - 1; i >= 0; i--) {
                    productsData.push(products.data.results[i]);
                };
                while (pageNumber <= products.data.pages){
                    getAllProducts();
                    pageNumber++;
                }
                for (var i = productsData.length - 1; i >= 0; i--) {
                    if (filterCategory.indexOf(productsData[i].custom.category_code) == -1) {
                        filterCategory.push(productsData[i].custom.category_code);
                    };
                    if (filterColor.indexOf(productsData[i].custom.color_code) == -1) {
                        filterColor.push(productsData[i].custom.color_code);
                        // $filter('orderBy')(filterColor, '+');
                    };
                    if (filterSeason.indexOf(productsData[i].custom.season) == -1) {
                        filterSeason.push(productsData[i].custom.season);
                    };
                };
                var deferred = $q.defer();
                deferred.resolve(response);
                products = productsData;
                return deferred.promise;

            });
    };

could you add your getAllProducts factory method code?

Pankaj Parkar
– Pankaj Parkar

2015-08-28 18:39:52 +00:00
Commented Aug 28, 2015 at 18:39 — Pankaj Parkar
– Pankaj Parkar, Commented Aug 28, 2015 at 18:39
Did you try removing the track by $index?

bumpy
– bumpy

2015-08-28 18:44:33 +00:00
Commented Aug 28, 2015 at 18:44 — bumpy
– bumpy, Commented Aug 28, 2015 at 18:44
@bumpy yup, didn't change anything

Lauren F
– Lauren F

2015-08-28 18:45:44 +00:00
Commented Aug 28, 2015 at 18:45 — Lauren F
– Lauren F, Commented Aug 28, 2015 at 18:45
@PankajParkar just added

Lauren F
– Lauren F

2015-08-28 18:47:08 +00:00
Commented Aug 28, 2015 at 18:47 — Lauren F
– Lauren F, Commented Aug 28, 2015 at 18:47

Lauren F · Accepted Answer · 2015-08-29 00:56:08Z

Seems like you missed to return data from service method, it should return the formatted data. No need of creating a promise again while you have already using $http which is returning promise.

Then inside your controller getAllProducts().then functions parameter will have data in it which have returned from the service method.

Factory

var getAllProducts = function() {
    return $http.get('/api/scroll?page=' + pageNumber)
    .then(function(response) {
      angular.extend(products, response);
      for (var i = products.data.results.length - 1; i >= 0; i--) {
        productsData.push(products.data.results[i]);
      };
      while (pageNumber <= products.data.pages) {
        getAllProducts();
        pageNumber++;
      }
      for (var i = productsData.length - 1; i >= 0; i--) {
        if (filterCategory.indexOf(productsData[i].custom.category_code) == -1) {
          filterCategory.push(productsData[i].custom.category_code);
        };
        if (filterColor.indexOf(productsData[i].custom.color_code) == -1) {
          filterColor.push(productsData[i].custom.color_code);
          // $filter('orderBy')(filterColor, '+');
        };
        if (filterSeason.indexOf(productsData[i].custom.season) == -1) {
          filterSeason.push(productsData[i].custom.season);
        };
      };
      return productsData; //return data from here

    });
};

Controller

var getProducts = function(type, filter) {
  productFactory.getAllProducts()
  .then(function(products) { //<--added data parameter here
    var allProducts = products; //<--assigned data to all products
    var filterProducts;
    switch (type) {
      case "category":
        filterProducts = $filter('filter')(allProducts, {
          custom: {category_code: filter}
        });
        break;
      case "color":
        filterProducts = $filter('filter')(allProducts, {
          custom: {color_code: filter}
        });
        break;
      case "season":
        filterProducts = $filter('filter')(allProducts, {
          custom: {season: filter}
        });
        break;
      default:
        filterProducts = productFactory.products;
    }
    $scope.products = _.uniq(filterProducts, function(p) {
      return p.custom.sku;
    });
    console.log($scope.products.length);
  });
}

Thank you for the help, Pankaj, but this is still not updating my view. The functions are working as they did before, but again, my view is not responding as expected.

Collectives™ on Stack Overflow

Angular $scope object not updating in view

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related