Creating dropdown with label:value pair

Dashboard
1

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:

[
    {
        "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
    }
]
2

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, 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
Screen Shot 2020-06-26 at 5.29.48 AM678Ă—573 39.2 KB

I took a look at your function node and came up with a different way of doing it using jsonata in a change node. See if this works as a replacement for your function node.

[{"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!

2 Likes
3

Awesome!

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

4

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