CODEWITHSUNDEEP
javascriptfiltervue.js
Jamie
Jamie

Reputation: 10906

Vue.js reuse filter

I've made these 2 filters:

Filter 1

  Vue.filter('role',function(value,role)
        {
            if(!role || 0 === role.length)
            {
                return value;
            }
            return value.filter(function(item) {
                return item.role.RoleName == role
            });
        });

Filter 2

    Vue.filter('company',function(value,company)
        {
            if(!company || 0 === company.length)
            {
                return value;
            }
            return value.filter(function(item) {
                return item.department.company.CompanyName == role
            });
        });

Now I would like to combine them. Like this:

Combine filters

  Vue.filter('employeefilter',function(value,employeeinfo,filteron)
        {
            if(!employeeinfo || 0 === employeeinfo.length)
            {
                return value;
            }
            return value.filter(function(item) {
                return item.filteron == employeeinfo
            });
        });

And I pass this to the combined filter:

v-for="employee in list | employeefilter selectedrole 'role.RoleName'

But that is not working how could I fix that ^

EDIT

I pass it now like this:

v-for="employee in list | employeefilter selectedrole 'item.role.RoleName'| employeefilter selectedcompany item.department.company.CompanyId"

Error:

Uncaught TypeError: Cannot read property 'replace' of undefined

Upvotes: 0

Views: 672

Answers (1)

Jeff
Jeff

Reputation: 25221

Related: Using variable keys to access values in JavaScript objects

From that answer:

You can access object properties by dot notation or by bracket notation.

var x = {'test': 'hi'};
alert(x.test); // alerts hi
alert(x['test']); // alerts hi

When you have a dynamic value, you have to use the latter:

var property = 'test';
alert(x.property); // looks for x.property, undefined if it doesn't exist
alert(x[property]); // looks for x['test'], alerts hi

So you'll need to do:

return value.filter(function(item) {
    return item[filteron] == employeeinfo
});

Edit, actually that won't work as you also need to parse the filteron string (item['role.RoleName'] wont work, item['role']['RoleName'] is what you want. Check out this answer for a function that will allow you to access a deep property of an object using a string: Accessing nested JavaScript objects with string key

Final code:

Object.byString = function(o, s) {
    s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
    s = s.replace(/^\./, '');           // strip a leading dot
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            o = o[k];
        } else {
            return;
        }
    }
    return o;
}

Vue.filter('employeefilter',function(value,employeeinfo,filteron)
    {
        if(!employeeinfo || 0 === employeeinfo.length)
        {
            return value;
        }
        return value.filter(function(item) {
            return Object.byString(value, filteron) == employeeinfo;
        });
    });

Upvotes: 1

Related Questions