Topic: How to use Filter plugin with multiple string values (for example, multiple color values for same shirt)
Hello,
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?
Hi!
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!
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.
@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']"
Hi!
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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