# Dropdown node in node red

**URL:** <https://discourse.nodered.org/t/dropdown-node-in-node-red/43196>\
**Category:** General\
**Created:** [25 March 2021 13:40 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196 "2021-03-25T13:40:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [25 March 2021 13:40 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/1 "2021-03-25T13:40:02Z")

</div>

Lets say I have 1 GET request and from it i get an array of objects. Is there any way to make a dropdown of all the objects so i can manually select which object I want to use?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 March 2021 13:51 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/2 "2021-03-25T13:51:04Z")

</div>

You can send options to `dropdown` node using `msg.options`.

```auto
[{"id":"2e20d61f.4aa97a","type":"ui_dropdown","z":"78abef.11f5941","name":"","label":"Dynamic Options","tooltip":"","place":"Select option","group":"346f3afd.14dd56","order":0,"width":0,"height":0,"passthru":true,"multiple":false,"options":[],"payload":"","topic":"topic","topicType":"msg","x":710,"y":460,"wires":[[]]},{"id":"bca9b0ae.b6384","type":"inject","z":"78abef.11f5941","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":380,"y":460,"wires":[["5d2ee77f.a8fe38"]]},{"id":"5d2ee77f.a8fe38","type":"function","z":"78abef.11f5941","name":"","func":"\nvar pl = [\n {\n \"one\":{\n \"param\":1,\n \"data\":123\n }\n },\n {\n \"two\":{\n \"param\":1,\n \"data\":123\n }\n },\n {\n \"three\":{\n \"param\":1,\n \"data\":123\n }\n }\n]\nmsg.options = pl\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":540,"y":460,"wires":[["2e20d61f.4aa97a"]]},{"id":"346f3afd.14dd56","type":"ui_group","name":"Default","tab":"445e350b.bd700c","order":1,"disp":true,"width":"6","collapse":false},{"id":"445e350b.bd700c","type":"ui_tab","name":"Home","icon":"dashboard","order":6,"disabled":false,"hidden":false}]

```

See also at the node-s help page.

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [25 March 2021 14:01 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/3 "2021-03-25T14:01:26Z")

</div>

You didn't understand me. I know about the dropdown UI node. Im wondering if it can be an function node so i can select whatever data I get from HTTP request

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 March 2021 14:13 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/4 "2021-03-25T14:13:40Z")

</div>

> [@ivexy24](#):
>
> . Im wondering if it can be an function node

If what can be a function node?

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [25 March 2021 14:31 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/5 "2021-03-25T14:31:34Z")

</div>

Imagine u have http request from which u get an array of objects. I want my dropdown node to show those objects ( as options in Select html tag ) and let me choose which 1 i want to output.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 March 2021 15:33 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/6 "2021-03-25T15:33:24Z")

</div>

Did you read the help text for the dropdown node as suggested by @hotNipi? In particular it says  
" 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"}]`".

Did you try the flow he posted? It shows exactly what you want to do, unless I still don't understand what you want.

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [25 March 2021 15:38 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/7 "2021-03-25T15:38:29Z")

</div>

Its hard to explain because i dont exactly know how but let me try 1 more time. I dont need the UI (Dashboard dropdown node). I need for example a custom node that will have the select tag filled with options which are the objects i recive from the array.I think i cant explain it any better , anyways thank you.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [25 March 2021 15:53 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/8 "2021-03-25T15:53:10Z")

</div>

Do you mean that you run the flow, the response comes and you feed it to the node which take the input and stores those values as config options which you can choose from dropdown? Or you want the node which provides the dropdown at the editor directly so you can change the choice of option on fly?  
For me it seems that both are kind of against the conception what the node should do but who knows ...

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [25 March 2021 15:56 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/9 "2021-03-25T15:56:19Z")

</div>

> [@ivexy24](#):
>
> a custom node that will have the select tag filled with options

What is the difference between that and the dashboard dropdown node?

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [25 March 2021 15:59 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/10 "2021-03-25T15:59:20Z")

</div>

The first one yeah.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [25 March 2021 18:31 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/11 "2021-03-25T18:31:37Z")

</div>

The usual way would be for your custom node to do its own request (or fetch) and then populate its own drop down, so it is all self contain.

You shouldn’t expect live flow data to populate the editor options.

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [26 March 2021 07:50 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/12 "2021-03-26T07:50:11Z")

</div>

I actually managed to do quite a lot. All i need now is to know if and how can I access msg.payload in html file .

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 March 2021 08:03 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/13 "2021-03-26T08:03:33Z")

</div>

Do you mean when the HTML file is running in the browser or do you mean you want to insert the payload into the html before it is sent to the browser?  
The answer to the former is no, the latter yes.

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [26 March 2021 08:54 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/14 "2021-03-26T08:54:22Z")

</div>

Tried using the get method insidte of the node and i get back an Array that has 1 Array inside that is full of objects. How do i access those objects. My variable that holds that array is called opt. I tried opt[0].name or opt[0][0].name but nothing seems to work.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 March 2021 09:02 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/15 "2021-03-26T09:02:24Z")

</div>

> [@ivexy24](#):
>
> an Array that has 1 Array inside that is full of objects. How do i access those objects

Read the node-red doc page Working with Messages which shows you how to get the path to a property from the debug pane.

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [26 March 2021 09:46 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/16 "2021-03-26T09:46:27Z")

</div>

I get a strange problem. So the data i get from http request is an array.I push the data in and existing array called opt and when i type opt.length the result is 0. But in my console i can see an array full of objects.Any idea why that happens?

---

<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:** [26 March 2021 10:07 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/17 "2021-03-26T10:07:06Z")

</div>

> [@ivexy24](#):
>
> objects.Any idea why that happens?

I can't, sorry, my psychic abilities are on the fritz.🙃

But seriously, could you answer a question like that with so little detail, no code, no screenshots, no sample data?

Give us something to go on 😂

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [26 March 2021 10:23 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/18 "2021-03-26T10:23:05Z")

</div>

![FetchError](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/d/7d6992c81b7add21a7f3cd089433f7d307d356ae.png)

---

<div class="post-metadata">

**Author:** ![ivexy24](https://avatars.discourse-cdn.com/v4/letter/i/df705f/32.png) [@ivexy24](https://discourse.nodered.org/u/ivexy24)\
**Post date:** [26 March 2021 10:23 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/19 "2021-03-26T10:23:25Z")

</div>

I get an array full of objects but i cant access it.

---

<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:** [26 March 2021 10:26 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/20 "2021-03-26T10:26:52Z")

</div>

Looks like what you are seeing is due to async nature of that code. The console.log is probably being called before the promise has resolved (before `then` is called)

Put the log inside the `then`

* * *

See, details help 😂😂😂

[Next page](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196.md?page=2)