AngularJS - Ng-Repeat does not updateAsk Questions

 Posted on 07/14/2018

I am working on a web store using Angular and am trying to clean the code using a service. I would like the service to load a list of items from a REST api and perform functions on those items across a variety of controllers. My problem occurs when I try to populate an ng-repeat statement with the data returned from the REST call - the list is never populated with the items that are fetched. Previously I was using $scope and $apply to ensure that my DOM was updated when the data was returned - is there something similar that I can do within the service?

The service

'use strict';
var serv = angular.module('serv', []);
serv.factory('shopService', function() {
    //create the shop client as service varible
    var client = window.ShopifyBuy.buildClient({
        domain: 'xxxxxxx.myshopify.com',
        storefrontAccessToken: 'xxxxxxxxxxxxxxxxx'
    });
    var products = [];
    client.product.fetchAll().then((products_complete) => {
        //do things and get the products ready
        products.push(item);
    });

return { products: products } });

The controller

'use strict';
var serviceApp = angular.module('serviceApp', ['serv']);
serviceApp.controller('CartController', ['shopService', function CartController(shopService) {
    //create a reference to the service variable
    this.products = shopService.products;
}]);

And the HTML

<body>
    <div ng-app="serviceApp" ng-controller="CartController as cart">
        <ul>
            <li ng-repeat="product in cart.products">
                <div> {{ product.title }} </div>
            </li>
        </ul>
    </div>
</body>

Any help is appreciated.

Share On: facebook gplus twitter
profile
Asked by ketan Linbachiya on 07/14/2018 Score: 269 points
Add Comment:

Comments

1 Answers

0 Corrected Answers
Aproved Answers
0
Profile
Answered by hardik chaudhary on 8/14/2018 7:41:26 AM Score: 454 points

You can make sure the promise finishes running before assigning the products in the controller and avoid running the fetchAll more than once. You can change the service:

serv.factory('shopService', function($q) {
    //create the shop client as service varible
    var client = window.ShopifyBuy.buildClient({
        domain: 'xxxxxxx.myshopify.com',
        storefrontAccessToken: 'xxxxxxxxxxxxxxxxx'
    });
    var products = [];
    var fetchAllCompleted = false;

    function getProducts() {
        var deferred = $q.defer();

        if (fetchAllCompleted) {
            deferred.resolve(products);
        } else {
            client.product.fetchAll().then((products_complete) => {
                //do things and get the products ready
                products.push(item);
                fetchAllCompleted = true;
                deferred.resolve(products);
            });
        }

        return deferred.promise;
    }


    return {
        getProducts: getProducts
    }
});

Then in the controller

serviceApp.controller('CartController', ['shopService', function CartController(shopService) {
    //create a reference to the service variable
    shopService.getProducts().then(function(products) {
        this.products = products;
    });
}]);

I hope this helps.

Comments

Add Comment:

Post Your Answers

Existing Members

Sign in to your account
Email Address
Password
New Member?
Sign up and complete profile
Full Name
Email Address
I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the StoodQ newsletters
Guideline to answer a question:

Useful tips to submit your answer
Please read below guidelines before you submit your answer for question.

  • Read and understand question for which you are submitting your answer.
  • Try to avoid grammatical and spell mistake while answering.
  • Do not post any irrelevant information in your answer.
  • Explain your answer with example or any reference link to help who posted question.
  • If you find irrelevant question, please report it to support. Click here to contact support.
  • You agree to the privacy policy and terms of use to submit any contents.

Note: StoodQ is online developers community which helps developer for their difficulty, lets help them with your value contribution.