# Automatic Data Display in Node-RED Dropdown Node

**URL:** <https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024>\
**Category:** Dashboard\
**Created:** [4 September 2023 08:06 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024 "2023-09-04T08:06:56Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![halukmy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/halukmy/32/31192_2.png) [@halukmy](https://discourse.nodered.org/u/halukmy)\
**Post date:** [4 September 2023 08:06 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/1 "2023-09-04T08:06:56Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/115955ee07459a935e939934873c8aa71973468b.png)

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/958d6adaed979b2a0035b6795b978bb5f51acdd8.png)

In my Node-RED project, I'm using a dropdown node, and I want to bind the content of this dropdown to MQTT incoming values. Additionally, I want the dropdown content to be automatically updated when the page is loaded. How can I achieve this?

My current flow looks like this:

MQTT incoming data updates the dropdown content.  
However, when the page is refreshed or opened, the dropdown content is empty, and the user needs to refresh the dropdown to fetch MQTT data again.  
How can I overcome this issue? Do you have any suggestions?

Thank you!

---

<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:** [4 September 2023 08:09 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/2 "2023-09-04T08:09:07Z")

</div>

> [@halukmy](#):
>
> Additionally, I want the dropdown content to be automatically updated when the page is loaded

use the ui\_control to trigger flows when a user opens the dashboard.

> [@halukmy](#):
>
> In my Node-RED project, I'm using a dropdown node, and I want to bind the content of this dropdown to MQTT incoming values

Doesnt the built-in help show you how to populate the dropdown via a msg?

---

<div class="post-metadata">

**Author:** ![halukmy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/halukmy/32/31192_2.png) [@halukmy](https://discourse.nodered.org/u/halukmy)\
**Post date:** [4 September 2023 08:12 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/3 "2023-09-04T08:12:10Z")

</div>

> [@Steve-Mcl](#):
>
> Doesnt the built-in help show you how to populate the dropdown via a msg?

When I press dropdown, I want it to load the latest data into this dropdown by bringing the headers on the server back up to date dynamically with mqtt data and dynamicly update dropdown members, actualy what i am looking for

---

<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:** [4 September 2023 08:17 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/4 "2023-09-04T08:17:14Z")

</div>

Unfortunately, that sentence doe not actually make a lot (of technical) sense.

> [@halukmy](#):
>
> When I press dropdown, I want it to load the latest data into this dropdown

That is not (easily) possible since dropdowns are typically loaded before display. What you are asking here is for a client side thing (the dropdown) to POST a request to Node-RED (the server), get new data, send it to the client side, update the internal list THEN display it to the user.

> [@halukmy](#):
>
> I want it to load the latest data into this dropdown by bringing the headers

What headers?

> [@halukmy](#):
>
> bringing the headers on the server back up to date dynamically with mqtt data

Sorry, no clue what you mean here

---

<div class="post-metadata">

**Author:** ![halukmy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/halukmy/32/31192_2.png) [@halukmy](https://discourse.nodered.org/u/halukmy)\
**Post date:** [4 September 2023 08:18 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/5 "2023-09-04T08:18:16Z")

</div>

> [@Steve-Mcl](#):
>
> easily) possible since dropdowns are typically loaded before display. What you are asking here is for a client side thing (the dropdown) to POST a request to Node-RED (the server), get new data, send it to the client side, update the internal list THEN display it to the user.

if you have update dropdown listview with code, im so happy if you can share, so i can make a trigger to update list

---

<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:** [4 September 2023 08:19 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/6 "2023-09-04T08:19:28Z")

</div>

I dont have dashboard installed but as I said, doesnt the built in help show you how to update the dropdown list at runtime?

---

<div class="post-metadata">

**Author:** ![halukmy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/halukmy/32/31192_2.png) [@halukmy](https://discourse.nodered.org/u/halukmy)\
**Post date:** [4 September 2023 08:20 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/7 "2023-09-04T08:20:21Z")

</div>

sadly couldnt find

---

<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:** [4 September 2023 08:23 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/8 "2023-09-04T08:23:43Z")

</div>

could not find the help panel?

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

It states:

> The Options may be configured by inputting `msg.options` containing an array. If just text then the value will be the same as the label, otherwise you can specify both by using an object of `"label":"value"` pairs :
> 
> `["Choice 1", "Choice 2", {"Choice 3":"3"}]`

---

<div class="post-metadata">

**Author:** ![halukmy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/halukmy/32/31192_2.png) [@halukmy](https://discourse.nodered.org/u/halukmy)\
**Post date:** [4 September 2023 08:37 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/9 "2023-09-04T08:37:01Z")

</div>

msg.options = [{"Option1":"0"}, {"Option2":"1"}, {"Option3":"2"},{"Option4":"3"},{"Option5":"4"}]  
msg.payload = 4;  
return msg;

this is updates the dropdown, thanks you friend,

now i need how to update msg.options with mqtt income value?

---

<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:** [4 September 2023 08:39 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/10 "2023-09-04T08:39:00Z")

</div>

> [@halukmy](#):
>
> now i need how to update msg.options with mqtt income value?

what does the MQTT data look like?

---

<div class="post-metadata">

**Author:** ![halukmy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/halukmy/32/31192_2.png) [@halukmy](https://discourse.nodered.org/u/halukmy)\
**Post date:** [4 September 2023 08:41 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/11 "2023-09-04T08:41:04Z")

</div>

actually i can manage with same format, when text incomes ok, but after mqtt data same data got problem very strange

```auto
[{"id":"e340a2.aae4bf6","type":"inject","z":"a61d2e077965cf5c","name":"","repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":220,"y":500,"wires":[["ce922a46.4b6878"]]},{"id":"ed7de142.26c35","type":"ui_dropdown","z":"a61d2e077965cf5c","name":"","label":"","tooltip":"","place":"Select option","group":"69517c1c6c854f74","order":1,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","topicType":"str","className":"","x":590,"y":500,"wires":[[]]},{"id":"ce922a46.4b6878","type":"function","z":"a61d2e077965cf5c","name":"","func":"msg.options = [{\"Option1\":\"0\"}, {\"Option2\":\"1\"}, {\"Option3\":\"2\"},{\"Option4\":\"3\"},{\"Option5\":\"4\"}]\nmsg.payload = 4;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":390,"y":500,"wires":[["ed7de142.26c35"]]},{"id":"5ed5562bdcd119a9","type":"inject","z":"a61d2e077965cf5c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payloadType":"date","x":200,"y":580,"wires":[["2e2694b90dda8be5"]]},{"id":"afc329bca9de3f5d","type":"ui_dropdown","z":"a61d2e077965cf5c","name":"","label":"","tooltip":"","place":"Select option","group":"69517c1c6c854f74","order":1,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"","value":"","type":"str"}],"payload":"","topic":"","topicType":"str","className":"","x":680,"y":580,"wires":[[]]},{"id":"2e2694b90dda8be5","type":"function","z":"a61d2e077965cf5c","name":"","func":"var mqttData =msg.payload; //[{\"Option1\":\"0\"}, {\"Option2\":\"1\"}, {\"Option3\":\"2\"},{\"Option4\":\"3\"},{\"Option5\":\"4\"}]\n // MQTT ile gelen veriyi al\n\n\n\nmsg.options = mqttData\nmsg.payload = 4;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":460,"y":640,"wires":[["afc329bca9de3f5d","4d4e7ab9e428fdd2"]]},{"id":"be1f2eb4e8332be2","type":"mqtt in","z":"a61d2e077965cf5c","name":"","topic":"are","qos":"2","datatype":"auto","broker":"d1deac92e1a41b17","nl":false,"rap":true,"rh":0,"inputs":0,"x":230,"y":660,"wires":[["2e2694b90dda8be5"]]},{"id":"4d4e7ab9e428fdd2","type":"debug","z":"a61d2e077965cf5c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":520,"y":760,"wires":[]},{"id":"69517c1c6c854f74","type":"ui_group","name":"Nem","tab":"d106a5d5f8f40b57","order":1,"disp":true,"width":"4","collapse":false,"className":""},{"id":"d1deac92e1a41b17","type":"mqtt-broker","name":"","broker":"40.87.141.219","port":"1883","clientid":"","autoConnect":true,"usetls":false,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"d106a5d5f8f40b57","type":"ui_tab","name":"202-A AREYFields AI","icon":"settings_cell","order":1,"disabled":false,"hidden":false}]

```

---

<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:** [4 September 2023 08:49 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/12 "2023-09-04T08:49:57Z")

</div>

> [@halukmy](#):
>
> but after mqtt data same data got problem very strange

I cannot help if you dont show me.

At a guess, you are seeing a long JSON string?

You likely need to parse the JSON to an object.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5bc8ffa2ae98a156f9652592758dcec540c4be8.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [4 October 2023 08:50 UTC](https://discourse.nodered.org/t/automatic-data-display-in-node-red-dropdown-node/81024/13 "2023-10-04T08:50:40Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.