Vue.js reuse filter

Question

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

Community · Accepted Answer · 2017-05-23 11:50:29Z

1

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;
        });
    });

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Mar 3, 2016 at 16:29

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

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

2 Comments

Jamie Over a year ago

Thanks this is brilliant(maybe a bit to far for me). But I understand it, I receive an error could you take a look at my edit?

Jeff Over a year ago

@jamie that means that filteron is undefined. I think you just need quotes around 'item.department.company.CompanyId':

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

Collectives™ on Stack Overflow

Vue.js reuse filter

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related