Proper way to get an object out of an array in AngularJS

Question

I'm just getting started with AngularJS and wondering if there's a better way to do this:

I have a factory providing me an array of objects representing products. (This is hard-coded for now - the products will eventually be returned from a RESTful API.)

app.factory('Products', function(){
    var products = [
        { slug: 'wireframe-kit', name: 'Wireframe Kit', price: 27 },
        { slug: 'ui-kit', name: 'UI Kit', price: 29 },
        { slug: 'ui-icons', name: 'UI Icons', price: 39 }
    ];
    return products;
});

Assuming a route such as /product/wireframe-kit, here's how the router is currently setup:

app.config(function($routeProvider){
    $routeProvider.
        when('/product/:slug', {
            templateUrl: 'template/product.html',
            controller: 'productController'
        });
    }
});

I'm then using the slug from the url to retrieve the correct product from this array in the controller:

app.controller('productController', function($scope, $routeParams, Products){
    Products.forEach(function(product){
        if( product.slug == $routeParams.slug) {
            $scope.product = product;
        }
    });
});

My concern is with the forEach loop in the controller - I'm sure there's got to be an easier, more efficient way to parse this products array to get the object I want. Any ideas?

As a general side-note: Do not continue looping through the collection when you found your match. Do something similar to: var prodLength = Products.length; for (var i = 0; i < prodLength; i++){if( Products[i].slug == $routeParams.slug) {$scope.product = Product[i]; break;}} That way you don't waist any iterations and comparing unnecessary object values. — Nope
– Nope, Commented Mar 9, 2014 at 10:47

Rob Sedgwick · Accepted Answer · 2014-03-09 10:39:34Z

1

If we had a REST API set up pragmatically it would like

/products - being your 'collection'

and /products/:id - being your 'model'

As you are using static data, it would still be worth putting the data on the server as static files to mimic these patterns in relevant web folders.

Then with Angular you can set up the routes to do get requests for these 'endpoints'

/products/ - gives you $scope.collection
/products/<id of products> - gives you $scope.model

answered Mar 9, 2014 at 10:39

Rob Sedgwick

5,2364 gold badges22 silver badges36 bronze badges

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

4 Comments

matthoiland Over a year ago

My thought was to make a database request once to fetch all the products (assuming ~10 products), then saving myself another HTTP request when navigating to a product detail page.

Rob Sedgwick Over a year ago

As you said you will be using a rest api in the future, this will be likely the setup you would want to employ for it. The key thing here is that each product array value would benefit from having an 'id' value and then you can still use /route/id as a route and still have the ability to 'choose' whether to fresh fetch from the server or use existing data from the collection array you already have.

Rob Sedgwick Over a year ago

What web server are you using ?

matthoiland Over a year ago

I'm currently running on Apache, with a Mongo+PHP RESTful API. I understand the pattern you're suggesting, but for this project, I'd like to fetch all 10 products whether I'm landing on /products, or /product/:id. That way, navigating between the two views would be instant.

ndpu · Accepted Answer · 2014-03-09 11:59:09Z

You can change your api to return object (if all products have unique slug). This way you can access products by key(slug) name:

app.factory('Products', function(){
    var products = {
        'wireframe-kit': { slug: 'wireframe-kit', name: 'Wireframe Kit', price: 27 },
        'ui-kit': { slug: 'ui-kit', name: 'UI Kit', price: 29 },
        'ui-icons': { slug: 'ui-icons', name: 'UI Icons', price: 39 }
    };
    return products;
});


app.controller('productController', function($scope, $routeParams, Products){
    $scope.product = Products[$routeParams.slug];
});

Collectives™ on Stack Overflow

Proper way to get an object out of an array in AngularJS

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related