Setting a dropdown default value based on the value of another (but with diff data from query)

App Building
1

Sorry, quite hard to explain in a headline, but probably easy to do (if you know how)....

I have a drop down (selectCompany), it os populated fro this query:

SELECT
  company.id,
  company.company_name,
  company.sector_id,
  company.country_id,
  sectors.id AS "Sector ID"
FROM company
LEFT JOIN sectors ON company.sector_id = sectors.id

I have another dropdown (Selectcountry).
I'd like to pre-populate that, based on whatever company is selected in the first drop down.

How can I make this link. I.e. from Query > SelectCompany > SelectCountry

hope to hear,
Neil

2

Hi @maillme,

You can use a JS Query or Transformer to return the list of countries based on the selected company.

// This would be your selected company id from the dropdown
const selectedCompanyId = yourCompanySelect.value; // For example, you can replace this with the actual selected ID

// Filtering the data
const matchingCompanies = companyData.filter(company => company.id === selectedCompanyId);

// Output the result
return matchingCompanies;
5 Likes
3

Hi @maillme,

Agree with @ZeroCodez 's solution. You can change your second select component's data source with the code directly.

{{companyData.data.filter(company => company.id === select1.value }}

4

Thank you for taking the time to reply.

I've tried various ways to use this, and likely I just don't know enough, but I'm trying to use it like this:


const selectedCompanyId = selectCompany.value

// Filter data
const matchingCompanies = getCompany.filter(company => company.id === selectedCompanyId);

// Output 
return matchingCompanies;

But I am not able to reference the getCompany query, correctly for some reason, as I get the error: getCompany.filter is not a function

I've tried variations, but with no joy (I.e. getCompany.data.filter)......

5

Thanks Miguel for your reply,

Are you saying this is an alternative to ZeroCode, or is this the code I shoudl put itn he second select once I get ZeroCode's code working?

thanks again
Neil

6

Hey there,

It is an alternative. Whether you prefer having a query/transformer to be able to further manipulate data and filters (or use it in multiple places) or using the code directly in the select component's data source is up to you. I personally almost always put the filters within the select component.

7

I think in the component is the cleanest for this use case, so thanks.

I'm still struggling. Sorry, I can usually wrap my head around this and do enough research to figure it out.... but I'm not getting anywhere, and I know this is rudimentary.

{{selectCompany.data.filter(company => company.id === selectCompany.value) }}

So, when I use your code, and I add it as the default value in my selectCountry drop down, it of course evaluates to the id of the company. But, what I need is it to evaluate to the 'country_id' - which is associated with the company....

I tried a few variations, but I'm not getting there.

I need to evluate:

  • What company was selected
  • Based on that company, give me the country_id associated with that company
  • Set that as default value in selectCountry

Sorry, thanks again.

8

Hey @maillme,

So, I've been reading your post and there are a couple of things to distinguish:

  1. Data source from default value: I'm not sure if you want your second component to update all of its data source, so that there will be only one option (i.e. the value of country_id) OR to keep all the countries as options but setting the right one as selected value. If the latter, then you can set {{ select1.selectedItem.country_id }} and it will automatically set your value based on what selected on the first.
  2. If the former, then the above still applies. I think what you're missing is formatting your data source as an array, otherwise the filter function will not work, e.g. {{formatDataAsArray(getCompany.data).filter(company => company.id === selectedCompanyId) }}. You can also format it directly in your query, if you go to the transform results section and write return formatDataAsArray(data)

Hope this helps!

1 Like
9

Miguel,

Thank you! This was driving me crazy - and it's the simplest fix. I perhaps did not explain it well enough /over-complicated it.... And I've learned far more complicated tasks in retool :rofl:

{{ selectCompany.selectedItem.country_id }}

This works perfectly. Exactly as I want (and I can override /choose another option).

Thanks again...
Neil

1 Like
10

Haha glad I could help!

1 Like