# Creating dropdown with label:value pair

**URL:** <https://discourse.nodered.org/t/creating-dropdown-with-label-value-pair/29011>\
**Category:** Dashboard\
**Created:** [26 June 2020 05:03 UTC](https://discourse.nodered.org/t/creating-dropdown-with-label-value-pair/29011 "2020-06-26T05:03:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmoholth](https://avatars.discourse-cdn.com/v4/letter/j/df705f/32.png) [@jmoholth](https://discourse.nodered.org/u/jmoholth)\
**Post date:** [26 June 2020 05:03 UTC](https://discourse.nodered.org/t/creating-dropdown-with-label-value-pair/29011/1 "2020-06-26T05:03:55Z")

</div>

I get a set of id - name pairs from a select statement. The result is in the inject node in the attached nodes. I would like to have a dropdown where the dropdown shows the name and when a name is selected the value shall be the id.

My sample code that obviously is wrong is:

var my\_array = ;  
var index = 0;  
for (var item in msg.payload ) {  
var local\_label = msg.payload[item].name;  
var value = msg.payload[item].fan\_id;  
my\_array[index] = local\_label;  
index++;  
}  
msg.options = my\_array;  
return msg;

If I instead modify the code to create a label:value pair all the labels in the dropdown shows "local\_label".

Here is my modified example:

var my\_array = ;  
var index = 0;  
for (var item in msg.payload ) {  
var local\_label = msg.payload[item].name;  
var value = msg.payload[item].fan\_id;  
my\_array[index] = {local\_label:value};  
index++;  
}

msg.options = my\_array;

return msg;

What am I doing wrong?

Here is the node tree:

```auto
[
    {
        "id": "d7533a0c.e42048",
        "type": "ui_dropdown",
        "z": "f7584b9d.ca91f8",
        "name": "",
        "label": "my dropdown",
        "tooltip": "",
        "place": "Select option",
        "group": "e182c702.116e28",
        "order": 3,
        "width": 0,
        "height": 0,
        "passthru": true,
        "multiple": false,
        "options": [
            {
                "label": "",
                "value": "",
                "type": "str"
            }
        ],
        "payload": "",
        "topic": "",
        "x": 580,
        "y": 320,
        "wires": [
            []
        ]
    },
    {
        "id": "e88b6b3c.fa2c88",
        "type": "debug",
        "z": "f7584b9d.ca91f8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "x": 610,
        "y": 500,
        "wires": []
    },
    {
        "id": "a9bc7eec.5ece7",
        "type": "function",
        "z": "f7584b9d.ca91f8",
        "name": "Create dropdown with label:value pairs",
        "func": "var my_array = [];\nvar index = 0;\nfor (var item in msg.payload ) {\n var local_label = msg.payload[item].name;\n var value = msg.payload[item].fan_id;\n my_array[index] = {local_label:value};\n index++;\n}\n\nmsg.options = my_array;\n\nreturn msg;\n",
        "outputs": 1,
        "noerr": 0,
        "x": 330,
        "y": 400,
        "wires": [
            [
                "d7533a0c.e42048",
                "e88b6b3c.fa2c88"
            ]
        ]
    },
    {
        "id": "c0e3146a.1d9f18",
        "type": "inject",
        "z": "f7584b9d.ca91f8",
        "name": "",
        "topic": "",
        "payload": "[{\"fan_id\":0,\"name\":\"Output 1\"},{\"fan_id\":1,\"name\":\"Output 2\"},{\"fan_id\":2,\"name\":\"Output 3\"},{\"fan_id\":3,\"name\":\"Output 4\"}]",
        "payloadType": "json",
        "repeat": "",
        "crontab": "",
        "once": false,
        "onceDelay": 0.1,
        "x": 170,
        "y": 500,
        "wires": [
            [
                "a9bc7eec.5ece7"
            ]
        ]
    },
    {
        "id": "e182c702.116e28",
        "type": "ui_group",
        "z": "",
        "name": "Setup",
        "tab": "73a12294.36614c",
        "order": 1,
        "disp": true,
        "width": "12",
        "collapse": false
    },
    {
        "id": "73a12294.36614c",
        "type": "ui_tab",
        "z": "",
        "name": "Setup",
        "icon": "dashboard",
        "order": 1,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 June 2020 09:30 UTC](https://discourse.nodered.org/t/creating-dropdown-with-label-value-pair/29011/2 "2020-06-26T09:30:54Z")

</div>

Jon, welcome to the forum!

First off a terminology lesson. The export is not called a `tree`, it is called a `flow` - a term that everyone acknowledges is over loaded since a collection of nodes connected by wires is called a flow and all your nodes on all your tabs is also called a 'flow'. I must say though, 'tree' would be a good way of reducing what is called a flow.

second, when pasting in a flow, make sure to surround it with back-tics. If you [read this thread](https://discourse.nodered.org/t/how-to-share-code-or-flow-json/506), it will tell you what to do. Also the condensed version takes up less room in the threads so when exporting, select the `compact` tab in the export window.

 ![Screen Shot 2020-06-26 at 5.29.48 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/4/84c55c572de34ea599f522c795638fccfa292ff9.png)  
I took a look at your function node and came up with a different way of doing it using [jsonata](https://jsonata.org) in a change node. See if this works as a replacement for your function node.

```auto
[{"id":"155c212b.e3d0df","type":"change","z":"3500c4d4.375684","name":"","rules":[{"t":"set","p":"options","pt":"msg","to":"payload.{name:fan_id}\t","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":100,"wires":[["a47943bd.e90c8","986b9d56.25ffd"]]}]

```

Note: jsonata can seem scary, confusing and magical but it is awesome!

---

<div class="post-metadata">

**Author:** ![jmoholth](https://avatars.discourse-cdn.com/v4/letter/j/df705f/32.png) [@jmoholth](https://discourse.nodered.org/u/jmoholth)\
**Post date:** [26 June 2020 14:45 UTC](https://discourse.nodered.org/t/creating-dropdown-with-label-value-pair/29011/3 "2020-06-26T14:45:35Z")

</div>

Awesome!

I am sorry for using wrong terminology. You proposal works excactly as intended. I have to read myself up on jsonata.

---

<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:** [26 July 2020 14:45 UTC](https://discourse.nodered.org/t/creating-dropdown-with-label-value-pair/29011/4 "2020-07-26T14:45:37Z")

</div>

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