Topic: How to use Filter plugin with multiple string values (for example, multiple color values for same shirt)

andrewsavikas priority asked 3 years ago


I have been using the Filter plugin code examples as the basis for customizing for my own purposes. How would I use the Filter plugin for the situation when an item has multiple string values? (For example, a shirt that is both Red and Blue.) I can see how to filter if there are multiple numeric values (like the example with clothing that is multiple sizes, such as data-mdb-size="[36, 38, 40, 42]") but I cannot find a similar example with multiple string values, like data-mdb-color="['red', 'blue']".

Is it possible to use the Filter plugin for such a situation?

Krzysztof Wilk staff answered 3 years ago


As I wrote above - you can single quotes outside and double inside to make it work and make it look more clear.

Instead of using ", just write

data-mdb-investment_types='["Investment Funds", "Startups/Business Financing"]'

and everything should work as expected :)

Best regards

andrewsavikas priority commented 3 years ago

Thanks, but I'm using Jekyll to generate the HTML, and I don't think I can force it to use single quotes when generating attribute values. As long as it works!

andrewsavikas priority answered 3 years ago

OK, here's how I got it to work as expected:

data-mdb-investment_types="["Investment Funds", "Startups/Business Financing"]"

It seems the data-mdb attribute can't use a dash ("-"), and the single quotes around the string values need to be escaped.

andrewsavikas priority answered 3 years ago

@Krzysztof Wilk thank you, that's what I'd tried, but then I get this error in the console (and the filtering silently fails):

VM1880:1 Uncaught SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at i.value (all.min.js:292)
at all.min.js:292
at Array.filter (<anonymous>)
at i.value (all.min.js:292)
at i.get (all.min.js:292)
at i.value (all.min.js:292)
at i.value (all.min.js:292)
at i.value (all.min.js:292)
at HTMLInputElement.<anonymous> (all.min.js:292)

This is the actual data attribute I'm trying to use:

data-mdb-investment-types="['Investment Funds', 'Startups/Business Financing']"

Krzysztof Wilk staff answered 3 years ago


Yes, that's possible :) I assume you are using HTML structure, so all you have to do is to write values for the category like below:

data-mdb-color='["gray", "black"]'

The outer quote should be double and inner - single, but that's a little bug we discovered thanks to your question, so thanks for that!

Anyway - you can use multiple string category values using the solution above :)

Best regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: 3.0.0
  • Device: MacBook Air
  • Browser: Chrome
  • OS: Mac OS X Big Sur
  • Provided sample code: Yes
  • Provided link: Yes