0

I'm struggling with a webshop I'm making in AngularJS. I'm trying to save a product into a database, but something goes wrong when I try to call a certain function. I'm getting this error:

TypeError: undefined is not a function
at l.$scope.createProduct (http://localhost:3000/controllers/product.Controller.js:30:20)
at hb.functionCall (http://localhost:3000/node_modules/angular/angular.min.js:198:426)
at Cc.(anonymous function).compile.d.on.f (http://localhost:3000/node_modules/angular/angular.min.js:215:74)
at l.$get.l.$eval (http://localhost:3000/node_modules/angular/angular.min.js:126:193)
at l.$get.l.$apply (http://localhost:3000/node_modules/angular/angular.min.js:126:419)
at HTMLFormElement.<anonymous> (http://localhost:3000/node_modules/angular/angular.min.js:215:126)
at HTMLFormElement.c (http://localhost:3000/node_modules/angular/angular.min.js:32:363)

I don't understand why this is happening, so I hope someone out there can help me. Here's my HTML code

<form ng-submit="createProduct()">
            <div class="form-group">
                <label for="id">ID</label>
                <input type="text" ng-model="id" class="form-control" id="id" name="id" placeholder="Indtast det tilhørende ID">
            </div>
            <div class="form-group">
                <label for="brand">Brand</label>
                <input type="text" ng-model="brand" class="form-control" id="brand" name="brand" placeholder="Indtast brand">
            </div>
            <div class="form-group">
                <label for="content">Indhold</label>
                <input type="text" ng-model="content" class="form-control" id="content" name="content" placeholder="Indtast indhold">
            </div>
            <div class="form-group">
                <label for="alcohol">Procent</label>
                <input type="text" ng-model="alcohol" class="form-control" id="alcohol" name="alcohol" placeholder="Indtast antal procent">
            </div>
            <div class="form-group">
                <label for="price">Pris</label>
                <input type="text" ng-model="price" class="form-control" id="price" name="price" placeholder="Indtast prisen">
            </div>
            <div class="form-group">
                <label for="category">Kategori</label>
                <input type="text" ng-model="category" class="form-control" id="category" name="category" placeholder="Indtast kategori">
            </div>

<button type="submit" class="btn btn-primary">Opret produkt</button>
        </form>

Besides my HTML i also have a product.Controller and a products.service. The productController looks like this:

(function(){

    function productController($scope, productsService, cartService, $routeParams){

        var modelProduct = function(productArray){
            $scope.product = productArray[0];
        }

        productsService.getProduct($routeParams.id)
            .then(modelProduct);

        $scope.addToCart = function(product, amount){
            cartService.addToCart(product, amount);
        }



        $scope.createProduct = function() {
            var product = {
                id          :   this.id,
                brand       :   this.brand,
                content     :   this.content,
                alcohol     :   this.alcohol,
                price       :   this.price,
                category    :   this.category
            }

            console.log(product);

            productsService.saveProduct(product);

        }
    }

    angular
        .module("Main.product", [])
        .controller("productController", productController);
})();

and my productsService looks like this:

(function(){
    "use strict";

    var productsService = function($http){

        var categoriesSelected = new Array();
        var products = new Array();

        var getProducts = function(){

            /* Hent fra den lokale grillbar
            return $http.get("./data/products.json")
                    .then(function(response){
                        console.log(response.data);
                            return response.data;
                        }, getError);

            /* Hent fra databasen */

            return $http.get("api/products")
                    .then(function(response){
                        console.log(response.data);
                            return response.data;
                        }, getError);
        };

        var setProducts = function(data) {
            products = data;
        } 

        var getProduct = function(id) {
            return $http.get("api/product/" + id)
                    .then(function(response) {
                        return response.data;
                    })
        }


        var saveProduct = function(product){
            console.log(product);
            return $http.post("api/product", product)
                        .then(function(response){
                            return response.data;
                        })
        }


        var getCategories = function(response){
            return $http.get("./data/categories.json")
                    .then(function(response){
                        return response.data;
                    }, getError)
        };

        var getCategoriesSelected = function(){
            return categoriesSelected;
        }

        var productFilter = function(product){
            if(categoriesSelected.length > 0){
                if(categoriesSelected.indexOf(product.category) < 0){
                    return;
                }
            }
            return product;
        }

        var getError = function(reason){
            console.log(reason);
        }

        var findProductInArray = function(data, prodId){
            return data.filter(function(elem){
                if(elem.prodId === prodId){
                    return elem;
                }
            });
        }

        var categoryChange = function(category){
            var i = categoriesSelected.indexOf(category);
            if (i > -1) {
                categoriesSelected.splice(i, 1);
            } 
            else {
                categoriesSelected.push(category);
            }
        }

        var categoryFilter = function(product) {

            console.log("aks");
            if($scope.categoriesSelected.length > 0) {
                if($scope.categoriesSelected.indexOf(product.category) < 0) {
                    return;
                }
            }
            return product;
        }

        return{
            getProducts: getProducts,
            getProduct: getProduct,
            getCategories: getCategories,
            getCategoriesSelected: getCategoriesSelected,
            productFilter: productFilter,
            categoryChange: categoryChange,
            categoryFilter: categoryFilter 
        }
    }

    angular
        .module("Main.products")
        .factory('productsService', productsService);

})();

I hope someone out there can help me!

0

1 Answer 1

2

You don't appear to be exporting saveProduct as a public method of your service:

return{
    getProducts: getProducts,
    getProduct: getProduct,
    getCategories: getCategories,
    getCategoriesSelected: getCategoriesSelected,
    productFilter: productFilter,
    categoryChange: categoryChange,
    categoryFilter: categoryFilter 
}
Sign up to request clarification or add additional context in comments.

1 Comment

Jesus Christ, such a basic error. Thank you very much for the quick answer! I'll add you as the problem solver ASAP (The site doesn't allow me to do it yet)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.