How to re render a list in select tag in editor

[syedhannan]

I am fetching a list of files from FTP and displaying it in the typedInput select tag.

So the first time I access the path of FTP I am able to fetch the files and display it in the select tag as well as in the console.

But if I try to access a different path then the list in select tag does not re render even though I am able to get the updated list in the console.

Here is my code:

$.getJSON("ftplist", function (data) {
          let ftplist = data;
          console.log("ftp list is ", ftplist);
          if (ftplist.length > 0) {
            $("#node-input-ftplist").val("");
            $("#node-input-ftplist").prop("disabled", false);

            for (let i = 0; i < ftplist.length; i++) {
              let obj = { value: ftplist[i], label: ftplist[i] };
            }

            $("#node-input-ftplist").typedInput({
              type: "ftplist",  //is this line required?
              types: [
                {
                  value: "ftplist",
                  options: ftplist,
                },
              ],
            });
          }
        });

[Steve-Mcl]

You need to use $(".input").typedInput('types',['str','num']);

See methods in API docs: TypedInput Widget : Node-RED

---

TBH: this is not the best use of typeInput - you may as well use a standard HTML select-option list

[syedhannan]

Can you please point out to a node or example in node red which uses HTML select-option since I was not able to find any

[Steve-Mcl]

There are lots of examples on the web (after all, the node-red nodes front end are built with HTML + JavaScript + jQuery)

Try looking here for starters

[syedhannan]

Thanks for sharing the link

[syedhannan]

I have now used html select-option and am able to gt the desired drop down.

This is the code:

                for (
                  var index = 0;
                  index < ftplist.ftpListNames.length;
                  index++
                ) {
                  $("#node-input-ftplist").append(
                    '<option value="' +
                      ftplist.ftpListNames[index] +
                      '">' +
                      ftplist.ftpListNames[index] +
                      "</option>"
                  );
                }

I am not sure how I can save the selected value in a default variable.

[Steve-Mcl]

You can get the selected option (using jQuery) and store its value in the node properties in the oneditsave handler.