CLIENT_SIDE: Filter a query’s JSON Array column on ANY match of a tagify content - SOLVED

Wappler General How To
#1

Hey guys,

I have read a few posts needing to filter query results containing a JSON array column based on values that exist on another Array (lets say valuew that exist in a tagify).

The only solutions I have read is handling this case on server-side with complicated nested repeats and filling an Array List that is finally exported.
So, instead of server-side, I got it working by filtering on client-side the results on client side with a custom dmx.formatter that accepts the two arrays as arguments and check if ANY of the values exist in both Arrays:

- Adding a DataView based on the serverconnect containing the initial results . 
- Then I pass the dmx.formatter result in the Filter option of the DataView
And we are done!
The only think that we have to do is checking if tagify has values (return filtered results) or no values (return all results)

The dmx.formatter is:

dmx.Formatter('array', 'existInArrays', function (arr1, arr2) {
    var res = 0;
    const output = arr2.filter(function (arr) {
        res = res + ((arr1.indexOf(arr) !== -1) ? 1 : 0);
    });
    return res;
});

The dataView with the filter:

<dmx-data-view id="view_products_contains_AnyTag" dmx-bind:data="srvc_products_contains_AnyTag.data.query_products_copy" filter="srvc_products_contains_AnyTag.data.query_products_copy&amp;&amp;tagify1.values.hasItems()?(srvc_products_contains_AnyTag.data.tagsList.existInArrays(prd_Tags)):prd_id&gt;=0"></dmx-data-view>

Here is a simple video with this working:

groups-google-chrome-2024-02-19-10-23-31_hFbPz7rb

BUT… Allthough it works like a charm and the results are 100% correct, I get multiple AppConnect errors

here is the error:

image
image715×577 28.5 KB

Anybody has an idea about the error that is coming from the custom dmx.formatter?

#2

Try this one

dmx.Formatter('array', 'existInArrays', function (arr1, arr2) 
{
    var res = 0;
    arr2.forEach(function (arr) 
{
        res += (arr1.indexOf(arr) !== -1) ? 1 : 0;
    });
    return res;
});
#3

Thanks @franse but I still get error…

image
image705×198 7.88 KB

And always has to do with reading undefined property in either foreach() in your suggestion or filter() in mine…

But I cannot understand how it triggers the error allthough it works like a charm!!!

It must be something in front of my eyes and I can’t see it…

#4

GOT IT!!!

It is a timing issue.
I have to check if the arrays (arguments) are empty…
The DataView component is trigering the dmx.formatter on page.load, so both of the arrays are empty.

Here is the simple fix:

dmx.Formatter('array', 'existInArrays', function (arr1, arr2) {
    var res = 0;
    if (arr1 && arr1.length && arr2 && arr2.length) {
        const output = arr2.filter(function (arr) {
            res = res + ((arr1.indexOf(arr) !== -1) ? 1 : 0);
        });
    }
    return res;
});

So, a good solution for anybody who need to filter a query’s JSON Array column on ANY match of a tagify content…

(@marcosvinicios please try it if you want…)

2 Likes
#5

Fantastic! Way to think outside the box for a solution.

More info on Custom Formatters - Creating Custom Formatters (PHP and client-side)

1 Like
Filter using Tagify which takes data from an array ["CHI","ARG"]
#6

I’m trying to get this working in my sample for @marcosvinicios but I’m having trouble

<dmx-data-view id="view_products_contains_AnyTag" dmx-bind:data="srvc_products_contains_AnyTag.data.query_products_copy" filter="srvc_products_contains_AnyTag.data.query_products_copy&amp;&amp;tagify1.values.hasItems()?(srvc_products_contains_AnyTag.data.tagsList.existInArrays(prd_Tags)):prd_id&gt;=0"></dmx-data-view>

What is prd_Tags? It seems like that should be the tagify values?

This is what I have but it’s not working. It does show all items first, but then the data view is empty when I select anything.

<dmx-data-view id="dv_tours_filter" dmx-bind:data="sc_tours.data.query" filter="sc_tours.data.query&&tagify1.values.hasItems()?sc_tours.data.query.countries.existInArrays(tagify1.values) : test_id>=0"></dmx-data-view>

Thanks.

1 Like
#7

Dear @Heather_Mann,
can you please follow along on Marcos post? I’m explaining there step by step.
Keep up and ask there please
(I’m gonna be confused…)

1 Like
#8

Geez. Sorry. I didn’t get a notification on that post so…

2 Likes