Manipulating Rest API data with multiple timezones for one country

Wappler General How To
#1

Here is roughly the schema I am fetching. (name=country name)

image
image450Ă—543 10.9 KB

What would be the trick for the right value bindings setup for having in the select input dropdown field only the timezones relevant to the country selected in a previous select input field?

image
image470Ă—670 11.2 KB

#2

In the data source, you need to use a where filter with the binding.
Once a country is selected, it will automatically filter the data and show just the limited timezones in select component.

countryRestApi.data.where('name', selectcountry.value, '==')
#3

Thank you! So simple and so obvious, I should have thought about it.

Untitled
Untitled497Ă—561 18.8 KB

Also how in the data formater can I clean up / transform the API where multiple UTC per country are comma separated instead of in a desired list?

image
image769Ă—229 8.72 KB

#4

If the filtered list of where clause returns you a comma separated list ALWAYS, you can do something like:

countryRestApi.data.where('name', country.value, '==')[0].utctimes.split(',')

OR

countryRestApi.data.where('name', country.value, '==').values('utctimes')[0].split(',')

But, if that is not the case, you will have to create a custom formatter in JS which will read each of the rows in filtered data, and create a new array of items from that. Resulting in a merge single list of all filtered rows & their multiple comma separated value.

#5

Thanks.
Not always comma separated alas since arrays can have one value.
{“name”:“India”,“timezones”:[“UTC+05:30”]}, {“name”:“USA”,“timezones”:[“UTC-12:00”,“UTC-11:00”,“UTC-10:00”,“UTC-09:00”,“UTC-08:00”,…"]}

I’ll explore the forEach function in JS but how do I create a custom formatter and use it?

#6

Here are a few posts that might help:



1 Like