Filtering External API Datasource

Wappler General How To
#1

First off, I do not have that much knowledge of APIs and using them in Wappler. I do this all the time with a filter and a query parameter in the server actions, but don’t know how on the API source. I searched and saw how to do sorting, which is awesome, but no filtering. I am trying to filter an API datasource with a basic text input value. When I type a value in the text box, it filters the API. The API, to my knowledge, does not have any query parameters. How do I do this completely on the client side? Can it be done?

Thanks,
Chris

#2

I think you use the dataview component in app connect to filter the api source?

1 Like
#3

I am using it to sort by headers, so possibly. I see some filter parameters but I’ve tried many different combinations on it with no luck.

#4

i think you then have to use a repeat region and use the dataview component as the repeat data, not the api connection.

#5

Right now I have an external API, and I have it connected to a dataview. I created a bootstrap table using the generator and using the dataview as a source. All that is working. I added a session storage manager for my sort and dir sessions and now I have sortable headers.All good so far. I just want to do some filtering of data. I tried using the Filter on the dataview:

filter=“ToteNumber.contains(Totenumber.value)”

where ToteNumber is the column in my Dataview and Totenumber.value is the value of my text input field I’m using.
And it does something… whenever I enter a value in the text field my grid does not return any rows. I clear it and it returns all rows so I think that may be my issue, something is not right there.

Thanks for your help on this.

#6

@Teodor, any idea on what I’m missing or doing wrong?
I’m trying to filter the external API with the dataview. I have a column in my API called ToteNumber.

To filter I have a text field called Totenumber,

input id="Totenumber" name="Totenumber" type="text" class="form-control">

then I have this for my filter in the dataview:

filter="ToteNumber.contains(Totenumber.value)"

With noting in the text field, the table returns all rows. However If I enter anything in the text field, nothing is returned, even a valid filter value.

#7

Please try:

filter="Totenumber.value ? ToteNumber.contains(Totenumber.value) : 'true'"

And probably it’s not a great idea to have the column and search input have the same names…

#8

That does not work either. Yes, it is a bad practiice on the naming. I just changed it to seachvalue

filter="searchvalue.value ? ToteNumber.contains(searchvalue.value) : 'true'"

#9

Ah yes, my mistake, no need of ' ' around true:

filter="searchvalue.value ? ToteNumber.contains(searchvalue.value) : true"

#10

Well that didn’t work either. Here is my page:
https://meijer.datatelematics.net/test.html

#11

Works perfectly fine:

search
search1149×747 124 KB

#12

Well shoot. I guess I need to restart my browser because it goes blank on anything.

So tell me, can you briefly explain why you had to use that statement with the “?” in it?

#13

ok, I feel like an idiot. I was using lower case !

#14

Well that’s a ternary operator … if there is a value in search, then filter the data source.

#15

Thanks for the explanation. I will do some research on that.
Thanks for your help.

#16

You can use the ‘to lowercase’ formatter on both expressions to make the search case insensitive.

#17

Yep, works great! Thanks!

1 Like
#18

5 posts were split to a new topic: Video capturing program