Hi Retool team, I’m trying to create a dropdown from an array of maps, but I’d like the label to be just one of the array map fields (e.g., ‘name’) rather than the entirety of the map. Here’s an example array:
[ { "avatarUrl": "https://storage/generated_faces/059734.jpg", "name": "Alice", "_id": "BALFsn9fUBq93ghFm9ss", "__metadata": { "segments": [ "users", "BALFsn9fUBq93ghFm9ss" ] } }, { "avatarUrl": "https://storage/generated_faces/059582.jpg", "name": "Bob", "_id": "Rxpv9yvPqxlZMKoXSg8V", "__metadata": { "segments": [ "users", "Rxpv9yvPqxlZMKoXSg8V" ] } }, { "avatarUrl": "https://storage/generated_faces/059684.jpg", "name": "Eve", "_id": "YeEMuwRXWjlhTXQiyJlm", "__metadata": { "segments": [ "users", "YeEMuwRXWjlhTXQiyJlm" ] } } ]
Retool will load this as is, but it’s not very user friendly:
What’s the recommended way to create a new array of labels? Should I put a transformer on the query and somehow return both the original data as well as an array of labels?
Thanks for considering!
So in the Values field of the Dropdown’s properties in your right-hand panel, you can just use a Javascript map function on your array, like so:
{{myResult.data.map(user => user.name)}}
…which is standard Javascript stuff.
This will give you an array of just names.
Does this help you?
Perfect, thanks! I was thinking I’d need a map, just wasn’t sure where to jam it. Good to know that we can evaluate js in the {{}} blocks.
Yes, this is something the Retool team have noticed needs to be made more clear to people. And it’s super convenient 
How do you keep the ID in the list so when the user.name is clicked, you can use it’s ID ?
In drop down components you have two fields: Values and Labels.
If you want to get an ID from your selection, you should map “user.id” in the values field, and use “user.name” in the labels field.
The effect is that the dropdown will show the names in the dropdown, but when you access the currently selected value, it will be the ID.