# Populate Dropdown

**URL:** <https://discourse.nodered.org/t/populate-dropdown/89298>\
**Category:** FlowFuse\
**Tags:** dashboard-2\
**Created:** [5 July 2024 11:00 UTC](https://discourse.nodered.org/t/populate-dropdown/89298 "2024-07-05T11:00:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [5 July 2024 11:00 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/1 "2024-07-05T11:00:34Z")

</div>

Hi,

dashboard 2.0 : 1.12.4

I am working on migrating an apps to dashboard 2.0 . I am testing the dropdown ui\_update for dynamicly update the widget.

ui\_update.label : works  
ui\_update\_options: nothing display or object Object

It is probably a little detail I missed but I tried to figure it out without success

Print Screen for ui\_update\_label, abd ui\_update\_options result  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/e/8e5b9d6a4f9b1ca5208b9c8a1ac06829e79d1e37.png)

here my values:  
options : format values used with dashboard 1.0 -  
ui\_update\_options : Same data as in options with dashboard 2.0 payload name

This data format works well with dashboard 1.0 ( the msg.options). I simple use a change node to copy my query result from msg.options to msg.ui\_update\_options.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/7/e7d0efeb4b4da3393e8e26f98ffece7dcbde52c5.png)

Thanks in advance

Yves

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 July 2024 11:13 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/2 "2024-07-05T11:13:15Z")

</div>

Could you share a couple of example options, or the value of `msg.ui_update.options` please?

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [5 July 2024 12:04 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/3 "2024-07-05T12:04:38Z")

</div>

Hi Joe,

Sorry, I forget to included it , and thanks for your tutorial videos, they are very instructive ..

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/0/a02ac11a0a9be4a120fae5daae7c35e7be10dea0.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/6/2654d5b924dfa3cd4cac5d2193d7c7bf8bc5d4b6.png)

best  
Yves

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 July 2024 14:03 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/4 "2024-07-05T14:03:56Z")

</div>

The `options` array needs to be in the format:

```auto
[{
    value: "value-here"
    label: "Label Here"
}, { ... }]

```

or

```auto
["Option 1", "Option 2", ...]

```

(see [docs](https://dashboard.flowfuse.com/nodes/widgets/ui-dropdown.html#dynamic-properties))

Currently, you have the keys of the object for each _type_, and then I'm not sure what the value is links too here.

I can make that more explicit in the documentation though, as it's not 100% clear.

If you're open to using the function node, then you could do `msg.ui_update.options = msg.ui_update.options.map((b) => {return Object.keys(b)[0] })` to extract a single array of each boat type

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [5 July 2024 16:43 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/5 "2024-07-05T16:43:18Z")

</div>

Hum .. your way is much cleaner, but I believe it is what I am doing

Actual process

\*/ MYSQL Query result \*/ This one is on boat name -

[  
{"id":6,"name":"Free at Last1"},  
{"id":73,"name":"ISOLA"}  
]

//Reformat array to work with dropdown  
var reformattedArray = msg.payload.map(obj =\>{  
//declare the reformatted object  
var rObj = {};  
rObj[obj.name] = obj.id;  
return rObj;  
});

//Dashboard version 1  
msg.options = reformattedArray;

//dashboard version 2  
msg.ui\_update.options= reformattedArray;  
return msg;

/\* re-arranged data \*/

[{"Free at Last1":6},{"ISOLA":73}]

I see -- I must keep value: and label: -- I tought is was only to show the value type ..

so, my data should look like this:  
[  
{  
"value": "1",  
"label": "Free at Last1"},  
{ "value": "73",  
"label": "ISOLA" }]

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 July 2024 17:54 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/6 "2024-07-05T17:54:22Z")

</div>

> [@ylechasseur](#):
>
> so, my data should look like this:  
> [  
> {  
> "value": "1",  
> "label": "Free at Last1"},  
> { "value": "73",  
> "label": "ISOLA" }]

In your screenshot of the `options` data, this isn't the format - can't debug the problems in detail at the moment, but this is definitely the issue

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [5 July 2024 18:41 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/7 "2024-07-05T18:41:17Z")

</div>

If your SQL was to select `id` as `value` and `name` as `label`, there would be no need to reformat the data.

---

<div class="post-metadata">

**Author:** ![ylechasseur](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ylechasseur/32/6549_2.png) [@ylechasseur](https://discourse.nodered.org/u/ylechasseur)\
**Post date:** [5 July 2024 19:10 UTC](https://discourse.nodered.org/t/populate-dropdown/89298/8 "2024-07-05T19:10:15Z")

</div>

it is working well thanks a lot for your help.

Steve didn't think about to do it in my SQL query, it is a very good idea.. and will avoid any data manipulations ...  
Thanks a lot and have a good wk

Yves