AngularJS set var: http get

Question

I have an angular filter set up which works great:

categorieFilter = angular.module("categorieFilter", [])
categorieFilter.controller("catFilter", ["$scope", "store", function($scope, store){
    $scope.search = "";
    $scope.products = [];
    $scope.categories = [];

    $scope.categories = store.getCategories();
    $scope.products = store.getProducts();

    $scope.filterProductsByCats = function(category){
        $scope.search = category;
    };
}])
categorieFilter.factory('store', function(){
            var categories = ['Lattes','CC Blend','Frappes'];
            var products = [
                {name: 'Latte machiatto',category: 'Lattes'},
                {name: 'Frappe ice',category: 'Frappes'},
                {name: 'Latte caramel',category: 'Lattes'},
                {name: 'Frappe speculoos',category: 'Frappes'},
                {name: 'Cappucino',category: 'CC Blend'},
                {name: 'Filter coffee',category: 'CC Blend'},
            ];
            return {
                getCategories : function(){
                    return categories;
                },
                getProducts : function(){
                    return products;
                }
            };
        });

But the var categories and var products are still hard coded so I want to retreive the needed data from my server to fill these variables. And I can't seem to get this right? I have another function where I can get the required data but I don't know how I can get these 2 in 1...?

categories = angular.module('categories', []);
categories.controller("category",function($scope, $http){
    var serviceBase = 'api/';
    $http.get(serviceBase + 'categories').then(function (results) {
        $scope.categories = results.data;
        for(var i = 0; i < $scope.categories.length; i++){
            var categories = $scope.categories[i];
        }
});
});

So how can I properly set the var categories to the required $http.get to retreive my server data into the filter above?

ninty9notout · Accepted Answer · 2015-05-06 14:49:46Z

2

I think you should be able to get rid of the hard coded block in the service and just return:

return {
    getCategories: $http.get('/categories').success(function (data) {
        return data;
    }),

    getProducts: $http.get('/products').success(function (data) {
        return data;
    })
}

Make sure you dependencies are setup correctly for the service though (i.e. $http):

.factory('store', function ($http) {
    // The above return block here
});

And this should do the trick!

edited May 6, 2015 at 14:49

answered May 5, 2015 at 11:23

ninty9notout

1,1168 silver badges11 bronze badges

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

4 Comments

smanhoff Over a year ago

What do you mean with my dependencies are setup correctly for the service? I get an error: ReferenceError: $http is not defined. But I think it's related to these dependencies?

ninty9notout Over a year ago

You're getting that error because you haven't injected $http dependency. See the edit above where I'm adding $http as an argument to the factory definition function.

smanhoff Over a year ago

Yes that solved that one but now I'm getting: Error: [$http:badreq] Http request configuration must be an object. Received: function (response)

ninty9notout Over a year ago

Wow this answer is a train wreck from my part. I've updated the answer so $http uses the correct response format. Please read up on $http more here: docs.angularjs.org/api/ng/service/$http

Collectives™ on Stack Overflow

AngularJS set var: http get

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related