Unfortunately, I am struggling with filtering the value obtained from the URL. Any ideas on how to fix it?
$scope.categoryFilter = function (products){
if ($routeParams.categorySlug == products.category.seo_name){
return;
}else {
return $scope.products;
}
};
Here are my routes:
when('/products/category/:categorySlug', {
controller: 'ProductsListController',
controllerAs: 'vm',
templateUrl: '/static/templates/products/products_index.html'
}).otherwise('/');
This is a snippet of the JSON data:
{
"name": "Classic Pyjama Pants",
"category": {
"id": 2,
"name": "Lingerie",
"description": "",
"visible": true,
"products_count": 0,
"products_count_cache": 0,
"category_id_name": "2",
"seo_name": "lingerie",
"seo_title": "",
"seo_desc": "",
"seo_keywords": "",
"lft": 2,
"rght": 5,
"tree_id": 3,
"level": 1,
"parent": {},
"id": 920
In my template, I utilize the filter like this:
<div class="catalog-item" ng-repeat="product in products |filter: categoryFilter">
<div class="item-pre-title">
Free shipping over $150
</div>
<div class="item-img">
<a href="/products/{{ product.id }}/"><img ng-src="{{ product.picture[0].external_img_url }}" width="150px"
height="150px" alt=""></a>
</div>
<a href="/products/{{ product.id }}/" class="item-title">{{ product.name }}</a>
<div class="item-price">
<div class="price-old">{{ product.old_price }}</div>
<b>{{ product.price }}</b>
</div>
<div class="item-footer">
<a href="#" class="item-view"></a>
<div class="item-sales-alert">
Get discount
</div>
</div>
</div>
A warning in the console pops up:
angular.js:11706 TypeError: Cannot read property 'seo_name' of null
I managed to resolve the TypeError issue but I can't get the filtering to work. Any suggestions?
UPDATE: I fixed the TypeError problem, but the filtering functionality is still not functioning properly.