Dropdown node in node red

Doesnt seem to work either.

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

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>

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.

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.

<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>

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.

thats not what I suggested.

This is what i suggested...


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.

It works now.Thank you very much.

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?

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.

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

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.

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

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