angularjs filter (not working)
|
12:33 AM |
No comments |
angularjs filter (not working)
The following HTML, Javascript and JSON render correctly, but the filter does not work at all. What are we doing wrong?
The Javascript:
app.controller('dashboard_controller', function ($scope, $http) { $http.get('./api/distributors/my').then(function (res) { $scope.distributors = res.data; }); $http.get('./api/dashboard/catalogs').then(function (res) { $scope.catalogs = res.data; }); }); And these 2 JSONs:
api/distributors/my:
{ "data": { "9kkE1sL8vXSZMVaL": { "created": "1346840145.22", "uid": "9kkE1sL8vXSZMVaL", "created_by": "3W7AoIQHTtvPauaK", "name": "Nikee", "description": "Just do it", "image_file": "LogoNike.jpg", "modified": "1368443518.3894", "modified_by": "3W7AoIQHTtvPauaK", "currency": "gbp" }, "1OBKUhpb8srwHVVb": { "created": "1346840213.41", "uid": "1OBKUhpb8srwHVVb", "created_by": "3W7AoIQHTtvPauaK", "name": "Zappos", "description": "The webs most popular shoe store", "image_file": "zappos.jpg", "modified": "1347006513.93", "modified_by": "3W7AoIQHTtvPauaK", "currency": null }, "qHPXDp5lSQuz9z3Q": { "created": "1346840305.78", "uid": "qHPXDp5lSQuz9z3Q", "created_by": "3W7AoIQHTtvPauaK", "name": "Kitchenaid", "description": "For the way it's made", "image_file": "kitchenaid_logo.gif", "modified": "1346840305.78", "modified_by": "3W7AoIQHTtvPauaK", "currency": null }, "9K4G8gE1sh4qpVG2": { "created": "1346840443.32", "uid": "9K4G8gE1sh4qpVG2", "created_by": "3W7AoIQHTtvPauaK", "name": "Unilever", "description": "Create a better future", "image_file": "Unilever-logo.jpg", "modified": "1346842125.2", "modified_by": "3W7AoIQHTtvPauaK", "currency": null }, "55ORaD7h0EMcaX82": { "created": "1346840529.93", "uid": "55ORaD7h0EMcaX82", "created_by": "3W7AoIQHTtvPauaK", "name": "Dell", "description": "The power to do more", "image_file": "dell-logo.jpg", "modified": "1346840529.93", "modified_by": "3W7AoIQHTtvPauaK", "currency": null }, "2LHf5ZipYjA2PdXu": { "created": "1352084334.37", "uid": "2LHf5ZipYjA2PdXu", "created_by": "3MO4JyiB9rMWTfBu", "name": "Online Retailer", "description": "Online Retailer", "image_file": "Home and Giftware.gif", "modified": "1352954806.28", "modified_by": "cu3OraVD7WclpLrX", "currency": null }, "MdTDL72ynFySuUCR": { "created": "1352870158.83", "uid": "MdTDL72ynFySuUCR", "created_by": "1JiAF71w5VPHGgJe", "name": "Uniuniform", "description": "Uniform Suppliers", "image_file": "CWLogo.png", "modified": "1358317144.85", "modified_by": "sv3HuiiRbiuHWkul", "currency": null }, "oyYmdDcod9fseZng": { "created": "1352934703.42", "uid": "oyYmdDcod9fseZng", "created_by": "cu3OraVD7WclpLrX", "name": "Heidy Pharmaceuticals", "description": "Pharmaceutical Solutions", "image_file": "heidy.jpg", "modified": "1352934703.43", "modified_by": "cu3OraVD7WclpLrX", "currency": null }, "Kfs4HdFUfz6j2l2I": { "created": "1352953682.22", "uid": "Kfs4HdFUfz6j2l2I", "created_by": "cu3OraVD7WclpLrX", "name": "xxx", "description": "Online Retailer", "image_file": "xxx.gif", "modified": "1352953828.34", "modified_by": "cu3OraVD7WclpLrX", "currency": null }, "g2qRqUWvPSLRvLQr": { "created": "1352953924.68", "uid": "g2qRqUWvPSLRvLQr", "created_by": "cu3OraVD7WclpLrX", "name": "ddd", "description": "Natural Product Retailer", "image_file": "yes-to.jpg", "modified": "1352953924.68", "modified_by": "cu3OraVD7WclpLrX", "currency": null }, "bbSu3jpFhdkG3TJR": { "created": "1352954016.22", "uid": "bbSu3jpFhdkG3TJR", "created_by": "cu3OraVD7WclpLrX", "name": "llll", "description": "Artificial Product Retailer", "image_file": "l.jpg", "modified": "1352954016.23", "modified_by": "cu3OraVD7WclpLrX", "currency": null }, "X9xWF9VrRDqGWZ6S": { "created": "1352954722.97", "uid": "X9xWF9VrRDqGWZ6S", "created_by": "cu3OraVD7WclpLrX", "name": "zzz", "description": "Toy Manufacturer", "image_file": "zzz.jpg", "modified": "1352954722.97", "modified_by": "cu3OraVD7WclpLrX", "currency": null }, "02CCPuWtM6ZJVgiQ": { "created": "1367741881.7113", "uid": "02CCPuWtM6ZJVgiQ", "created_by": "3W7AoIQHTtvPauaK", "name": "test brand", "description": "xxxx", "image_file": null, "modified": "1367741882.5129", "modified_by": "3W7AoIQHTtvPauaK", "currency": null }, "GjsdgMCzp1n379j0": { "created": "1369136484.1802", "uid": "GjsdgMCzp1n379j0", "created_by": "3W7AoIQHTtvPauaK", "name": "testing all products", "description": "just a test", "image_file": null, "modified": "1369136484.5298", "modified_by": "3W7AoIQHTtvPauaK", "currency": "usd" }, "spVsxtJVroMkXQ1N": { "created": "1370508658.353", "uid": "spVsxtJVroMkXQ1N", "created_by": "3W7AoIQHTtvPauaK", "name": "pppp Import", "description": "", "image_file": null, "modified": "1370508658.4394", "modified_by": "3W7AoIQHTtvPauaK", "currency": "usd" } } api/dashboard/catalogs
{ "data": { "UPf17vFhMhiM2yYl": { "created": "1352960014.4", "uid": "UPf17vFhMhiM2yYl", "created_by": "3MO4JyiB9rMWTfBu", "name": "All Products", "description": "This catalog contains all of your products", "modified": "1352960014.4", "modified_by": "3MO4JyiB9rMWTfBu", "distributor_id": "9kkE1sL8vXSZMVaL", "image": null, "start": null, "end": null, "is_archived": null, "products_count": "0", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "ZUfcKpz0VrJZZZvW": { "created": "1354172792.79", "uid": "ZUfcKpz0VrJZZZvW", "created_by": "ORIGWlEFxbuE945J", "name": "test catalog", "description": "", "modified": "1354172792.79", "modified_by": "ORIGWlEFxbuE945J", "distributor_id": "9kkE1sL8vXSZMVaL", "image": null, "start": null, "end": null, "is_archived": null, "products_count": "0", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "6YoSSDCzLH8gEokf": { "created": "1360706477.5283", "uid": "6YoSSDCzLH8gEokf", "created_by": "3W7AoIQHTtvPauaK", "name": "xxxx", "description": "", "modified": "1360706477.5312", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "9kkE1sL8vXSZMVaL", "image": null, "start": null, "end": null, "is_archived": null, "products_count": "3", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "4AwqE7iTNQmjSBED": { "created": "1360794567.8451", "uid": "4AwqE7iTNQmjSBED", "created_by": "3W7AoIQHTtvPauaK", "name": "All Products", "description": null, "modified": "1360794567.8454", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "4AwqE7iTNQmjSBED", "image": null, "start": null, "end": null, "is_archived": null, "products_count": "1", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "02CCPuWtM6ZJVgiQ": { "created": "1367741881.7916", "uid": "02CCPuWtM6ZJVgiQ", "created_by": "3W7AoIQHTtvPauaK", "name": "All Products", "description": null, "modified": "1367741881.7919", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "02CCPuWtM6ZJVgiQ", "image": null, "start": null, "end": null, "is_archived": null, "products_count": "2095", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "9kkE1sL8vXSZMVaL": { "created": "1368165852.0352", "uid": "9kkE1sL8vXSZMVaL", "created_by": "3W7AoIQHTtvPauaK", "name": "All Products", "description": null, "modified": "1368165852.0361", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "9kkE1sL8vXSZMVaL", "image": null, "start": null, "end": null, "is_archived": null, "products_count": "26", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "ZmSiqOK2C2Sq3MWB": { "created": "1368958571.9548", "uid": "ZmSiqOK2C2Sq3MWB", "created_by": "3W7AoIQHTtvPauaK", "name": "Test Catalog", "description": "", "modified": "1368958571.9581", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "02CCPuWtM6ZJVgiQ", "image": null, "start": "0", "end": "0", "is_archived": "1", "products_count": "0", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "flzoMbizDDTDpjgc": { "created": "1368958778.8623", "uid": "flzoMbizDDTDpjgc", "created_by": "3W7AoIQHTtvPauaK", "name": "xzczxc", "description": "", "modified": "1368958778.8637", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "02CCPuWtM6ZJVgiQ", "image": null, "start": "0", "end": "0", "is_archived": "0", "products_count": "29", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "KfRJHxp7jBnBGCJ5": { "created": "1369219487.4418", "uid": "KfRJHxp7jBnBGCJ5", "created_by": "3W7AoIQHTtvPauaK", "name": "hhh", "description": "", "modified": "1369219487.4433", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "9kkE1sL8vXSZMVaL", "image": null, "start": "0", "end": "0", "is_archived": "0", "products_count": "7", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "spVsxtJVroMkXQ1N": { "created": "1370508658.3567", "uid": "spVsxtJVroMkXQ1N", "created_by": "3W7AoIQHTtvPauaK", "name": "All Products", "description": null, "modified": "1370508658.3575", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "spVsxtJVroMkXQ1N", "image": null, "start": "0", "end": "0", "is_archived": "0", "products_count": "343", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "1OBKUhpb8srwHVVb": { "created": "1370857435.5606", "uid": "1OBKUhpb8srwHVVb", "created_by": "3W7AoIQHTtvPauaK", "name": "All Products", "description": null, "modified": "1370857435.5612", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "1OBKUhpb8srwHVVb", "image": null, "start": "0", "end": "0", "is_archived": "0", "products_count": "4", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "wXMHFdPyiXFBuRjJ": { "created": "1370864864.1247", "uid": "wXMHFdPyiXFBuRjJ", "created_by": "3W7AoIQHTtvPauaK", "name": "x", "description": "", "modified": "1370864864.1278", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "spVsxtJVroMkXQ1N", "image": null, "start": "0", "end": "0", "is_archived": "0", "products_count": "10", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "GjsdgMCzp1n379j0": { "created": "1371116610.6898", "uid": "GjsdgMCzp1n379j0", "created_by": "3W7AoIQHTtvPauaK", "name": "All Products", "description": null, "modified": "1371116610.6902", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "GjsdgMCzp1n379j0", "image": null, "start": "0", "end": "0", "is_archived": "0", "products_count": "2095", "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" }, "gvWLNWwsI3B7mnCU": { "created": "1371116669.5872", "uid": "gvWLNWwsI3B7mnCU", "created_by": "3W7AoIQHTtvPauaK", "name": "All Products", "description": null, "modified": "1371116669.5877", "modified_by": "3W7AoIQHTtvPauaK", "distributor_id": "gvWLNWwsI3B7mnCU", "image": null, "start": "0", "end": "0", "is_archived": "0", "products_count": 0, "thumb_image": "resources/media/default_image.jpg.thumbs/165x165.jpg" } }
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
Answer by alfrescian for angularjs filter (not working)
Assuming that you'd like to filter in catalogs using distributor name then the following custom filter does the job:
app.filter('distributorName', function() { return function(items, filterValue, distributors) { if (!filterValue){ return items; } var result = {}; angular.forEach(items, function(value, key) { var distributor = distributors[value.distributor_id]; if (distributor && distributor.name && distributor.name.toLowerCase().indexOf(filterValue.toLowerCase()) > -1){ result[key] = value; } }); return result; }; }); JSFiddle with local data: http://jsfiddle.net/alfrescian/p8zgp/
Answer by Narretz for angularjs filter (not working)
Angular filters cannot handle an object of objects as input. ng-repeat can render them, but filters expect an array of objects. The easiest way to fix this is to let the server return an array without named keys. You could also transform the response in angular after each request (more expensive).
Answer by stukennedy for angularjs filter (not working)
Very helpful to know ... here's a more generic version of alfrescian's solution, to filter a list of objects by a sub-key.
app.filter('objFilter', function() { return function(items, filter) { if (!filter){ return items; } var result = {}; angular.forEach( filter, function(filterVal, filterKey) { angular.forEach(items, function(item, key) { var fieldVal = item[filterKey]; if (fieldVal && fieldVal.toLowerCase().indexOf(filterVal.toLowerCase()) > -1){ result[key] = item; } }); }); return result; }; }); You can then have multiple filter boxes, like this
And your ng-repeat would look like this
Answer by Holger for angularjs filter (not working)
As Narretz already mentioned, Angular filters cannot handle an object of objects as input. But you can write your own simple filter converting the object of objects into an array of objects. You can use the angular filters behind your array filter by chaining.
Your array filter could be as simple as this:
app.filter('array', function() { return function(items) { var filtered = []; angular.forEach(items, function(item) { filtered.push(item); }); return filtered; }; }); Answer by Bruno Peres for angularjs filter (not working)
You can use the toArrayFilter that converts the object to an array so it can be used by regular filters.
In your case it would be as:
{{ catalog.$key }} - {{ catalog.someProp }} Answer by Cody for angularjs filter (not working)
What Is Worth Mentioning...
Given, this is rather a corner case, but I thought I'd share.
You've a data-structure; it needs to be a collection, but it requires very SOLID fundamentals and its own methods due to expected growth, complexity, or other constraints. So you decide to prototype this object as an array.
var OrdersDataModel = function OrdersDataModel(orders) { var thus = this; var orders = orders || []; function loadData(data) { this.splice.apply(this, [0, this.length].concat(data || orders)); return this; } function serialize() { var serialized = JSON.stringify(this); return serialized; } function marshalData() { var marshalled = JSON.parse(this.serialize()); return marshalled; } // export precepts this.load = loadData; this.serialize = serialize; this.marshalData = marshalData; return this; }; OrdersDataModel.prototype = new Array(); This may suit your needs and perform well in your ng-repeat -- until comes the need to filter your "array":
Your filter will fail (probably simply due to type-checks), and you'll wast a little time perhaps.
In my case, it can be easily remedied by modding my serialize method from
var serialized = JSON.stringify(this); -- to --
var serialized = JSON.stringify(this.slice(0)); Though, a much better way to accomplish my goal would be to decorate an array using either the Decorator Pattern or Constructor-Hijacking:
Instead of:
OrdersDataModel.prototype = new Array(); ... this.orders = new OrdersDataModel(); this.orders.load(serverData); -- use --
this.orders = OrdersDataModel.apply([]); this.orders.load(serverData); A lot of this may seem a little extraneous, but I expect this (and its encompassing module/controller) to expand quickly, so I've stuck as much to SOLID as possible to keep it air-tight.
Hope this saves you some time!
Answer by CodeWarrior for angularjs filter (not working)
Angular filters cannot handle an object of objects as input, however, to resolve the issue you are facing, you can add a watch to the catalog_filter. As follows:
$scope.$watch('catalog_filter', function (value) { regex = new RegExp($scope.catalog_filter); if (!$scope.catalog_filter) return true; return regex.test(catalog.uid); /* can create multiple conditions based on the requirement*/ }); Doing this the filter acts on the input text and filters when the text changes.
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment