Manipulating Rest API data with multiple timezones for one country

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

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?

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.'name', selectcountry.value, '==') 

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

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?

If the filtered list of where clause returns you a comma separated list ALWAYS, you can do something like:'name', country.value, '==')[0].utctimes.split(',')

OR'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.

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?

Here are a few posts that might help:

1 Like