Help with "...is not defined"


#1

Hello,
I always get the error "customers is not defined.

An array of customers and their orders are stored in the customersFactory. I’ve got two methods to get all customers and one by id. The problem seems to be in the getCustomer method of the customersFactory.

Anyone has a hint how to fix that error?

services.js

var app = angular.module('customerApp.services', []);

app.factory('customersFactory', function(){
  return {

    // Gibt alle Customers zurück
    getCustomers: function() {
      var customers = [
        {
          id: 1,
          joined: '2022-12-02', 
          name: 'Kanon', 
          city: 'Mitaka', 
          orderTotal: 9.9956,
          orders: [
            {
              id: 1,
              product: 'Shoes',
              total: 9.9956
            }
          ]
        }, 
        {
          id: 2,
          joined: '2012-12-20', 
          name: 'Takashi', 
          city: 'Tokyo', 
          orderTotal: 19.9956,
          orders: [
            {
              id: 2,
              product: 'Pants',
              total: 19.9956
            },
            {
              id: 3,
              product: 'Socks',
              total: 0.9956
            }
          ]
        }, 
        {
          id: 3,
          joined: '2000-05-06', 
          name: 'Kirby', 
          city: 'Osaka', 
          orderTotal: 90.9956,
          orders: [
            {
              id: 4,
              product: 'Shirts',
              total: 90.9956
            }
          ]
        }
      ];

      return customers;
    },

    getCustomer: function(customerId) {
      for (var i = 0, len = customers.length; i < len; i++) {
        if (customers[i].id === parseInt(customerId)) {
          return customers[i];
        }
      }
      return {};
    }

  }
});

controllers.js

var app = angular.module('customerApp.controllers', []);

app.controller('CustomersCtrl', ['$scope', 'customersFactory', function($scope, customersFactory) {
  $scope.customers = [];

  function init() {
    // Gibt alle Customers zurück
    $scope.customers = customersFactory.getCustomers();
  }

  init();
}]);

app.controller('OrdersCtrl', ['$scope', '$state', 'customersFactory', function($scope, $state, customersFactory) {
  var customerId = $state.params.customerId;
  $scope.customer = null;

  function init() {
    // Gibt einen Customer basierend auf der ID zurück
    $scope.customer = customersFactory.getCustomer(customerId);
  }

  init();
}]);

#2

define var customers outside getCustomers function (to persist outside runtime function):

   app.factory('customersFactory', function(){
       var customers = [];

       return {

         getCustomers: function() {
           customers = [
             {
               id: 1,
               joined: '2022-12-02', 
               name: 'Kanon', 
               city: 'Mitaka', 
               orderTotal: 9.9956,
               orders: [
                 {
                   id: 1,
                   product: 'Shoes',
                   total: 9.9956
                 }
               ]
             }, 
             {
               id: 2,
               joined: '2012-12-20', 
               name: 'Takashi', 
               city: 'Tokyo', 
               orderTotal: 19.9956,
               orders: [
                 {
                   id: 2,
                   product: 'Pants',
                   total: 19.9956
                 },
                 {
                   id: 3,
                   product: 'Socks',
                   total: 0.9956
                 }
               ]
             }, 
             {
               id: 3,
               joined: '2000-05-06', 
               name: 'Kirby', 
               city: 'Osaka', 
               orderTotal: 90.9956,
               orders: [
                 {
                   id: 4,
                   product: 'Shirts',
                   total: 90.9956
                 }
               ]
             }
           ];

           return customers;
         },

         getCustomer: function(customerId) {
           for (var i = 0, len = customers.length; i < len; i++) {
             if (customers[i].id === parseInt(customerId)) {
               return customers[i];
             }
           }
           return {};
         }

       }
    });

#3

Ah, thanks for your help, worked well.
That’s what I’ve already tried before, but the result page was empty (no error). Thought it didn’t fix the customers problem. Now I just have to find out, why the result page is empty.


#4

On the controller level: Angular doesn’t know about the customers binding, so you have to kick off the digest cycle yourself.

All you have to do is call $scope.$digest() after the $scope.customers gets updated.

(...)

 function init() {
   // Gibt alle Customers zurück
   $scope.customers = customersFactory.getCustomers();
   $scope.$apply();
 }

#5

After adding $apply():
Error: [$rootScope:inprog] $digest already in progress.