# Add dynamically data to node configuration

**URL:** <https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624>\
**Category:** General\
**Created:** [27 April 2020 14:48 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624 "2020-04-27T14:48:32Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![edoardottt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edoardottt/32/20179_2.png) [@edoardottt](https://discourse.nodered.org/u/edoardottt)\
**Post date:** [27 April 2020 14:48 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/1 "2020-04-27T14:48:32Z")

</div>

I have a custom node, which in the config file has code like this:

```auto
    <div class="form-row">
        <label for="node-input-stuff"><i class="icon-tag"></i> Stuff</label>
            <select id="node-input-stuff">
                <p id="options"></p>
            </select>
    </div>

```

I would like to fill the options of the select tag dynamically with a js get request. I have to retrieve some JSON and then bring only some attributes.  
Then I would like with the document.getElementById("options").innerHTML = text; I want fill in the options. Is it possible in some way?

---

<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:** [27 April 2020 14:53 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/2 "2020-04-27T14:53:14Z")

</div>

that is similar to the serialport looking up the list of available ports... [https://github.com/node-red/node-red-nodes/blob/master/io/serialport/25-serial.html#L395](https://github.com/node-red/node-red-nodes/blob/master/io/serialport/25-serial.html#L395)

---

<div class="post-metadata">

**Author:** ![edoardottt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edoardottt/32/20179_2.png) [@edoardottt](https://discourse.nodered.org/u/edoardottt)\
**Post date:** [27 April 2020 15:12 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/3 "2020-04-27T15:12:26Z")

</div>

Maybe I didn't understand what that code does, but I think it's not what I'm looking for ☹

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [27 April 2020 15:35 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/4 "2020-04-27T15:35:21Z")

</div>

Here is an explanation of how the serial port works that may help: [https://stackoverflow.com/questions/41567175/send-data-on-configuration/41567832#41567832](https://stackoverflow.com/questions/41567175/send-data-on-configuration/41567832#41567832)

---

<div class="post-metadata">

**Author:** ![edoardottt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edoardottt/32/20179_2.png) [@edoardottt](https://discourse.nodered.org/u/edoardottt)\
**Post date:** [27 April 2020 16:40 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/5 "2020-04-27T16:40:54Z")

</div>

ok, now it's better, but I have still some questions...

- How can I set a list of options if I have data?  
There it's used a text field and I can't use a text field 😕

- I have the data in the js file, can I use simply this to define an API endpoint?  
Maybe it isn't clear when you say 'You can't just put /'

```auto
RED.httpAdmin.get("/devices", function(req,res) {
        devices.list(function (err, devices) {
            res.json(devices);
        });
    });

```

---

<div class="post-metadata">

**Author:** ![edoardottt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edoardottt/32/20179_2.png) [@edoardottt](https://discourse.nodered.org/u/edoardottt)\
**Post date:** [27 April 2020 16:43 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/6 "2020-04-27T16:43:45Z")

</div>

And this is the html part inside a script tag.

```auto
$("#node-input-stuff").click(function() {
                $.getJSON('/devices',function(data) {
                    var devices = [];
                    $.each(data, function(i, device) {
                        devices.push(device);
                    });
                    $("#node-input-stuff").autocomplete({
                        source:devices,
                        minLength:0,
                        close: function( event, ui ) {
                            $("#node-input-stuff").autocomplete( "destroy" );
                        }
                    }).autocomplete("search","");
                });
            });

```

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [27 April 2020 16:48 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/7 "2020-04-27T16:48:54Z")

</div>

The serial node is an example of a node that retrieves data from the runtime and updates the edit dialog with that information.

In that particular case, it creates a text box with autocomplete support.

It sounds like you want a select box with the list of options. Here is an example of populating a select box dynamically - [https://stackoverflow.com/a/42434207/2117239](https://stackoverflow.com/a/42434207/2117239)

The precise detail will depend on the format of the data you have and how you want it represented in the UI.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [27 April 2020 17:20 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/8 "2020-04-27T17:20:25Z")

</div>

uibuilder also has a number of dynamic lookups, some of which populate drop-down boxes. The code is generally pretty well commented so may be of use.

---

<div class="post-metadata">

**Author:** ![edoardottt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edoardottt/32/20179_2.png) [@edoardottt](https://discourse.nodered.org/u/edoardottt)\
**Post date:** [28 April 2020 09:33 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/9 "2020-04-28T09:33:00Z")

</div>

Really useful! thanks 🙂 The last question I have to do is...how can I use JQuery in the html file? I have to write something in the settings file??

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [28 April 2020 09:35 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/10 "2020-04-28T09:35:55Z")

</div>

jQuery is provided as part of the editor environment. You don't need to do anything to add it.

---

<div class="post-metadata">

**Author:** ![edoardottt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edoardottt/32/20179_2.png) [@edoardottt](https://discourse.nodered.org/u/edoardottt)\
**Post date:** [28 April 2020 09:41 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/11 "2020-04-28T09:41:55Z")

</div>

It doesn't work for me 😕  
This is my script:

```auto
$.getJSON('devices',function(data) {
                for (var i = 0; i <= data.length; i++) { 
                    $('#SELECT_LIST').append('<option value="' + data[i]['deviceid'] + '">' + data[i]['name'] + '</option>');
                }
            }); 

```

Where I have to put this? Because I'm sure that have opened the endpoint.  
If I type in shell `curl http://localhost:1880/devices` I get back the JSON..

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [28 April 2020 09:54 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/12 "2020-04-28T09:54:42Z")

</div>

Firstly don't call your endpoint `devices`. Pick a name that is related to the node type you are registering - that reduces the chances that your endpoint clashes with someone elses.

You would put that code in the `oneditprepare` function of your node's html file. That function is called when the edit dialog is about to be displayed.

---

<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:** [27 June 2020 09:56 UTC](https://discourse.nodered.org/t/add-dynamically-data-to-node-configuration/25624/13 "2020-06-27T09:56:14Z")

</div>

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