# 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:** 15\
**Page:** 2

<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 11:07 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/21 "2021-03-26T11:07:56Z")

</div>

Doesnt seem to work either.

---

<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 11:12 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/22 "2021-03-26T11:12:38Z")

</div>

Show us the code. Copy/paste rather than screenshot. As has been stated before we are not telepathic. Use the `</>` button when pasting code.

---

<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 11:21 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/23 "2021-03-26T11:21:33Z")

</div>

````auto
type or paste code here
```<script type="text/javascript">
    RED.nodes.registerType('dropdown',{
        category: 'function',
        color: '#fff',
        defaults: {
            name: {value:""},
            options: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        oneditprepare: function(){
            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));
            }
            $('#node-input-options').val(this.options);
            
        },
        label: function() {
            let optionText = "";

for (let i = 0; i < options.length; i++){
    if(options[i].v === this.options){
        optionText = options[i].t;
        break;
    }
}

            return this.name||"Dropdown";
    }
    });
</script>
<script type="text/html" data-template-name="dropdown">
<div class="form-row">
    <label for="node-input-options"><i class="fa fa-calculator"></i> Options</label>
    <select id="node-input-options">

    </select>

</div>

<br>
<div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
</div>
</script>
<script type="text/javascript">

let test = [
    [
    {
    name: "ivan",
    age: 23
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
}
]
]
console.log(test)
// console.log(test[0])
// console.log(test[0][0].name)

// let opt = [];

// fetch('')
// .then(response => response.json())
// .then(data => opt.push(data))

// console.log(opt)
// console.log(opt.length)
// // console.log(opt[0][0].name);

let opt1 = {name:"Ivan",age:23}
let opt2 = {name:"IvanS", age:24};
let opt3 = {name:"IvanSu",age:25}
let opt = [opt1,opt2,opt3];

let options = [

];

opt.forEach(myFunction);
    function myFunction(item){
        options.push(
            {v:item.age,t:item.name}
        )
    }

</script>
````

---

<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 11:22 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/24 "2021-03-26T11:22:13Z")

</div>

The commented part is not working fine. This opt1 opt2 opt3 are just some random data i made so i could try and figure out the problem with the 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:** [26 March 2021 11:32 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/25 "2021-03-26T11:32:54Z")

</div>

The previous suggestion was to move the `log` inside the `then`, you replied saying that didn't work. The code you have shown has that whole section commented out so it is not surprising that it doesn't work.

---

<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 11:46 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/26 "2021-03-26T11:46:30Z")

</div>

```auto
<script type="text/javascript">
    RED.nodes.registerType('dropdown',{
        category: 'function',
        color: '#fff',
        defaults: {
            name: {value:""},
            options: {value:""}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        oneditprepare: function(){
            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));
            }
            $('#node-input-options').val(this.options);
            
        },
        label: function() {
            let optionText = "";

for (let i = 0; i < options.length; i++){
    if(options[i].v === this.options){
        optionText = options[i].t;
        break;
    }
}

            return this.name||"Dropdown";
    }
    });
</script>
<script type="text/html" data-template-name="dropdown">
<div class="form-row">
    <label for="node-input-options"><i class="fa fa-calculator"></i> Options</label>
    <select id="node-input-options">

    </select>

</div>

<br>
<div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input type="text" id="node-input-name" placeholder="Name">
</div>
</script>
<script type="text/javascript">

let test = [
    [
    {
    name: "ivan",
    age: 23
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
},
{
    name:"marko",
    age:22
}
]
]
// console.log(test[0])
// console.log(test[0][0].name)

let opt = [];
const fetchUrl = () => {
    const url = ''
    fetch(url)
    .then(response => response.json())
    .then(data => opt.push(data))
    .then(console.log(opt[0]));
}
fetchUrl()

console.log(test)

// console.log(opt[0][0].name);

// let opt1 = {name:"Ivan",age:23}
// let opt2 = {name:"IvanS", age:24};
// let opt3 = {name:"IvanSu",age:25}
// let opt = [opt1,opt2,opt3];

// let options = [

// ];

// opt.forEach(myFunction);
// function myFunction(item){
// options.push(
// {v:item.age,t:item.name}
// )
// }

</script>

```

---

<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 11:48 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/27 "2021-03-26T11:48:21Z")

</div>

Look at the fetch part of the code. The console.log(opt[0]) returns undefined. But when I console.log(data[0]) in the line before it works fine.

---

<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 11:57 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/28 "2021-03-26T11:57:36Z")

</div>

> [@ivexy24](#):
>
> Look at the fetch part of the code.

thats not what I suggested.

This is what i suggested...

```auto

let opt = [];
const fetchUrl = () => {
    const url = ''
    fetch(url)
    .then(response => response.json())
    .then(data => {
            opt.push(data);
            console.log("Inside fetch.then().then() -->", opt)
        })
}
fetchUrl()

```

Alternatively, switch to using async await.

---

<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 12:19 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/29 "2021-03-26T12:19:02Z")

</div>

It works now.Thank you very much.

---

<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 12:46 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/30 "2021-03-26T12:46:37Z")

</div>

1 more question tho. Im talking about Select Html tag that has its options tags inside.Those options have value and text. Is it somehow possible that 1 get request handles the name and the other handles value?

---

<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 12:49 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/31 "2021-03-26T12:49:47Z")

</div>

> [@ivexy24](#):
>
> Is it somehow possible that 1 get request handles the name and the other handles value?

1 get request handles the name and the other handles value?

So is that 2 get requests? or a pair of values from 1 get request?

Again, the devil is in the detail.

---

<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 12:55 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/32 "2021-03-26T12:55:46Z")

</div>

Yeah. The idea is to have 2 get requests , 1 will handle the value and other will handle the text

---

<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 12:58 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/33 "2021-03-26T12:58:13Z")

</div>

So have the 1st one build the options and set their text, the 2nd one to update the options value attribute.

Again, without details, cant help more.

---

<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 14:45 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/34 "2021-03-26T14:45:32Z")

</div>

Im still working in HTML File of Custom Node. Is there anyway i could access config object inside html file? Ill send u code in a sec

---

<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:** [9 April 2021 14:46 UTC](https://discourse.nodered.org/t/dropdown-node-in-node-red/43196/35 "2021-04-09T14:46:20Z")

</div>

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

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