# Custom node with values from global

**URL:** <https://discourse.nodered.org/t/custom-node-with-values-from-global/44977>\
**Category:** Developing Nodes\
**Created:** [30 April 2021 09:49 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977 "2021-04-30T09:49:39Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [30 April 2021 09:49 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/1 "2021-04-30T09:49:39Z")

</div>

I managed to create a node that gets data from global adn then stores the data in dropdown. The problem now is that the dropdown fills but only 1st item in it is selectable. If i select some other option and close the node . Then the 1st option is selected again. No matter which one i select its always the 1st that gets selected

---

<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:** [30 April 2021 09:58 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/2 "2021-04-30T09:58:07Z")

</div>

We've been through all of this and you were advised not to take this approach by Nick and others.

[https://discourse.nodered.org/t/containing-data-in-the-global-and-then-reusing-it](https://discourse.nodered.org/t/containing-data-in-the-global-and-then-reusing-it)

Not sure we want to go through this again I'm afraid.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [30 April 2021 10:06 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/3 "2021-04-30T10:06:42Z")

</div>

I know but im not asking u anything about global. Im just asking why my dropdown can select only 1st element? I get data by custom http admin

---

<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:** [30 April 2021 10:19 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/4 "2021-04-30T10:19:31Z")

</div>

> [@jake123](#):
>
> Im just asking why my dropdown can select only 1st element?

There are 100s of reasons why this might not be working. I'm not sure how you expect us to answer that with no knowledge of what code you've actually written.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [30 April 2021 12:06 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/5 "2021-04-30T12:06:14Z")

</div>

```auto
$.getJSON("setGlobalHostConfig/" + hostaddress, function (res) {
          if (res.status) {
            $.getJSON("getGlobalHostConfig", function (recdata) {
              console.log(recdata);
              $("#node-input-server").empty();

              let server = [];
              recdata.forEach((item) => {
                server.push({
                  v: item,
                  t: item,
                });
              });
              console.log(server);
              for (let i = 0; i < server.length; i++) {
                let value = server[i].v;
                let text = server[i].t;
                $("#node-input-server").append(
                  $("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text ( <option value="#">#</option> )
                );
              }
            });
          }
        });

```

I dont know why it selects only 1st

---

<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:** [30 April 2021 12:42 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/6 "2021-04-30T12:42:45Z")

</div>

It will always select the first option because you are never telling it which option should be selected.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [30 April 2021 12:44 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/7 "2021-04-30T12:44:57Z")

</div>

On my other dropdown i have literally the same code and it works fine

---

<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:** [30 April 2021 12:49 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/8 "2021-04-30T12:49:16Z")

</div>

I'm sorry, but it is really hard to help when you don't provide full information.

You started by saying "why isn't X working", without showing us your code or providing any details. Now you say you have it working in another instance - again, without showing any code.

My response is the same though: in the code you have shared, I can see you build a select box with options loaded dynamically. But you never set the value of the select box, so it will default to the first element in the list.

What you are missing is a call, after you have added all the options, to set its value to the `server` value of the node. If you were to add `var node = this;` at the start of your `oneditprepare` function, then you'd be able to to `$("#node-input-server").val(node.server)` _after_ the for loop that added all the options.

That _assumes_ you have defined a property called `server` on the node.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [30 April 2021 13:05 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/9 "2021-04-30T13:05:39Z")

</div>

```auto
        let e = $("#node-input-server")[0];
        let selHost = e.options[e.selectedIndex].value; // Gets the value of only the selected server
        console.log(selHost);

```

Shouldnt this be fine?

---

<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:** [30 April 2021 13:13 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/10 "2021-04-30T13:13:06Z")

</div>

> Shouldnt this be fine?

To do what exactly? That code gets the current selected value of the select box and prints it out. Nothing more than that.

I don't know where you have that code in relation to everything else.

What I do not see anywhere in your code is the line to _set_ the value of the select box after you have filled it with options.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [30 April 2021 13:14 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/11 "2021-04-30T13:14:58Z")

</div>

i have it right after the loop.  
` for (let i = 0; i < server.length; i++) { let value = server[i].v; let text = server[i].t; $("#node-input-server").append( $("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text ( <option value="#">#</option> ) ); } $("#node-input-server").val(this.server);`

Edit: idk why it formats like this

---

<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:** [30 April 2021 13:19 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/12 "2021-04-30T13:19:14Z")

</div>

> [@jake123](#):
>
> idk why it formats like this

Because you have to use ``` not just ` when marking code blocks.

I don't see the code you asked "Shouldn't this be fine" about anywhere in there.

I do see you call `$("#node-input-server").val(this.server);` - but you are using `this.server`. That will not work because at that point in your code, `this` is _not_ your node object. You missed the bit I said about adding `var node = this` at the top of your oneditprepare and using `node.server` instead.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [3 May 2021 14:14 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/13 "2021-05-03T14:14:37Z")

</div>

I have now created a button to call fetch inside nodes edit dialog but it doesnt take the value of inputs until i close and reopen the node. can i somehow change that i dont have to reopen the node to get the input values

---

<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:** [3 May 2021 14:28 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/14 "2021-05-03T14:28:10Z")

</div>

I have no idea what you mean. Sorry. If you were to provide some actual detail with your question, as I ask repeatedly, then I may be able to help.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [4 May 2021 06:46 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/15 "2021-05-04T06:46:35Z")

</div>

```auto
     fetch(url)
            .then((res) => res.json())
            .then((data) => {
              data.forEach((item) =>
                options.push({
                  v: item.name,
                  t: item.name,
                })
              );

              for (let i = 0; i < options.length; i++) {
                let value = options[i].v;
                let text = options[i].t;
                $("#node-input-options").append(
                  $("<option></option>").attr("value", value).text(text) //For every element in the select tag append appropriate value and text ( <option value="#">#</option> )
                );
              }
            });
        }, 1000);

```

this is the code for the fetch that i call on click. It should fetch 3 objects. But every time i click i delete the objects i have in my nodeedits dialog and on click it adds 3 everytime even tho i delete previous 3. So at start i have 3 obj. On 1st click i have 6 etc..  
EDIT: on the top of the code i forgot to write this =\> `$("#node-input-options").empty()`

---

<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 May 2021 07:05 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/16 "2021-05-04T07:05:08Z")

</div>

> [@jake123](#):
>
> on click it adds 3 everytime even tho i delete previous 3. So at start i have 3 obj. On 1st click i have 6

in which case, you could clear the options array and the `<select>` in your fetch routine before you add it to `options` and before you build the `option`s...

```auto

     fetch(url)
         .then((res) => res.json())
         .then((data) => {
              options = []; //clear options array
              $("#node-input-options").empty(); //clear the select
              //add data to options array & option list
              data.forEach((item) =>
                  let value = item.name;
                  let text = item.name;
                  options.push({ v: value, t: text, });
                  $("#node-input-options").append(
                    $("<option></option>").attr("value", value).text(text)
                  );
              );
         });

```

but as

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [4 May 2021 11:52 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/17 "2021-05-04T11:52:04Z")

</div>

in addition to this ill write my question here so i dont make a new topic.

```auto
if(msg.payload.name === options) {
                        msg.payload = msg.payload.value;
                        node.send(msg)
                    }

```

This is my code with what happens when we select the option. I think u dont need any other code to fix this.  
The problem is that my options are now like this

```auto
option1 = SystemCommandRun
option2 = LeadPumpSel
option3 = DptPressure

```

and if i select lets say option 2 , when i reopen the node the selected option that is displayed will always be option1 but the value will be from whichever i selected. You probably wont understand a word im saying..

EDIT: Its probably because my fetch function calls oneditprepare so it repopulates the dropdown everytime i reopen the node. Is there any way to get around this?

---

<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 May 2021 12:09 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/18 "2021-05-04T12:09:16Z")

</div>

> [@jake123](#):
>
> You probably wont understand a word im saying

not really but i guess you want this `#node-input-options` to have the previous selection when the user re-opens the editor?

> [@jake123](#):
>
> EDIT: Its probably because my fetch function calls oneditprepare so it repopulates the dropdown everytime i reopen the node. Is there any way to get around this?

As I have said in other posts, you need to persist the selection in a node.propertyXXX upon `oneditsave` then in the `oneditprepare` function, when you do the fetch & populate the dropdown, use the persisted `node.propertyXXX` value to re-select the item,

See a full explanation [here](https://discourse.nodered.org/t/input-type-checkbox/43511/16)

So for example...

```auto
              data.forEach((item) =>
                  let value = item.name;
                  let text = item.name;
                  options.push({ v: value, t: text, });
                  $("#node-input-options").append(
                    $("<option></option>").attr("value", value).text(text)
                  );
                  if(value == node.selectedValue) $('#node-input-options').attr('selected','selected'); //<<<<<
              );

```

- `node.selectedValue` is something you need to set when the select is changed.
- that means you need to have an `$("#node-input-options").on("change", function(){ ...}`
- and you need to add `selectedValue` to the `defaults` object

---

<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:** [4 May 2021 12:20 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/19 "2021-05-04T12:20:35Z")

</div>

> [@jake123](#):
>
> EDIT: Its probably because my fetch function calls oneditprepare so it repopulates the dropdown everytime i reopen the node. Is there any way to get around this?

Yes. I explained how to fix this 4 days ago, but you never responded.

> [@Custom node with values from global](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/12):
>
> Because you have to use ``` not just ` when marking code blocks. I don't see the code you asked "Shouldn't this be fine" about anywhere in there. I do see you call $("#node-input-server").val(this.server); - but you are using this.server. That will not work because at that point in your code, this is not your node object. You missed the bit I said about adding var node = this at the top of your oneditprepare and using node.server instead.

---

<div class="post-metadata">

**Author:** ![jake123](https://avatars.discourse-cdn.com/v4/letter/j/ac8455/32.png) [@jake123](https://discourse.nodered.org/u/jake123)\
**Post date:** [4 May 2021 13:19 UTC](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977/20 "2021-05-04T13:19:30Z")

</div>

Ok i have made that work using ur explanation. Now im wondering why cant i use fetch function inside js file of the node. It says fetch is not defined

[Next page](https://discourse.nodered.org/t/custom-node-with-values-from-global/44977.md?page=2)