Getting the ID of a selection in a dropdown based on the content value

App Building
,
1

I am trying to get a component's ID based on a selection from a dropdown in my app.

The table's data structure im trying to modify is this:

order_id,status_id
1,1
2,3

And I am trying to modify the status ID based on the following dropdown:

image

However, since the dropdown has the NAME of the status and not the ID, I was wondering how can I do the followng assignation:

image

The status table looks like this:

status_id,status_name
1,open
2,cancelled
3,successful

And for the dropdown im only using the name, but i need to access tthat ID somehow.

2

Hi @Johan,

You should be able to accomplish this creating a new transformer and using that to translate your dropdown selection so you can place the number into your query.

transformer1:

if (select14.value === 'open'){ 
   return 1
} else if (select14.value === 'cancelled'){
   return 2
} else if (select14.value === 'successful'){
   return 3
}

Then you can take what's returned from your transformer {{transformer1.value}} and place it wherever you need it.

Hope this helps! :slightly_smiling_face:

3

Hi Kenny, thanks for the advice! however, this si not very scalable no? what if I would need to add multiple new statuses, I would also have to update the transformer, and it defeats the principle of having a relational database with ID's for statuses. Is there a way to do that mapping by directly referencing the contents of the status table?

4

The way I've handled this is by utilising both the "Values" and "Labels" input available within the dropdown component.

You can write a simple query to select all the statuses with their ids, for example

SELECT * FROM statuses;

In the "Values" input you can then refer to this query like {{ selectStatuses.data.status_id }}.

In the "Labels" input you can use {{ selectStatuses.data.status_name }}.

This will display your human readable status_name within the dropdown but allow you to submit the integer ID by accessing {{ select14.value }}.

1 Like
5

Thanks for chiming in @Milo! Taking advantage of the "value" and "label" of the Select component is definitely an easier and scalable approach.

6