Есть ли способ создать динамическую форму опций с помощью узла JS?

#html #node.js #express #server #client

Вопрос:

Я использую Express и Node JS для создания формы, которая хранится в Google таблицах, используя API Google листов. Мне удалось правильно создать форму, которая хранится на определенном листе, хотя я читаю вложенный лист, значение которого я могу получить, так как правильное значение отображается в консоли.

Моя проблема в том, что мне нужно сделать тег опции на основе того, что я прочитал, например: Имена: Джон Доу , Джейн Доу,…, Имя Доу

Я не могу найти способ создать динамический тег опции для этого. Я пробовал использовать JSDOM, хотя я не могу передать значение (в приведенном выше примере, имя) в тег опции. Есть ли какой-нибудь способ сделать это?

Форма EJS:

 <h3 style="text-align: center;">Bus Garage Form</h3>
<div style="margin: 0 auto; width: 50%;" class="container">
   <div>
      <form action="/save" method="post">
          <label for="name">Name List: </label>
          <select id="name" name="name">
             <!--Dynamic List One-->
          </select>
          <br><br>
          <label for="list2">List 2: </label>
          <select id="list2" name="list_2">
             <!--Dynamic List Two-->
          </select>
          <br><br>
          <label for="val1">Value Float: </label>
          <input id="val1" name="val_1" type="number" step="0.1">
          <br><br>
          <label for="val2">Value Int: </label>
          <input id="val2" name="val_2" type="number">
          <br><br>
          <label for="val3">Value Date: </label>
          <input id="val3" name="val_3" type="date">
          <br><br>
          <input type="submit" class="btn btn-primary" value="Submit">
      </form>
   </div>
</div>
 

Узел JS (часть, которая мне нужна):

     googleSheets.spreadsheets.values.get({
        spreadsheetId: spreadsheetID,
        range: rng,
        }, (err, result) => {
        if (err){
            console.log(err);
        } else {
            res.render('form');
            
            var i;
            var resultArray = result.data.values;
            const numRows = resultArray ? resultArray.length : 0;
            const {window} = new JSDOM(``, {runScripts: 'outside-only'});
            
            console.log(`${numRows} rows retrieved, ${resultArray[0][0]} is the first value`);
            for(i = 0; i < numRows; i  ){
                window.eval(`
                    var sel = document.getElementById('name');
                    var opt = document.createElement('option');
                    opt.value = ${resultArray[i][0]};
                    opt.text = ${resultArray[i][0]};
                    sel.appendChild(opt);
                `);
            }
            
        }
    });
 

Ошибка, которую я получаю, — это отклонение необработанного обещания (в окне.eval(`)). Я не уверен, как передать значение с помощью JSDOM, хотя я открыт и для других идей.
JSDOM Github: https://github.com/jsdom/jsdom

Комментарии:

1. Похоже, имя следует процитировать здесь: var sel = document.getElementById(name); вот так: var sel = document.getElementById('name');

2. Да, я только что понял это, когда опубликовал это! Хотя, к сожалению, это не моя проблема. Это позволяет получить ${resultArray[i][0]}, чтобы поместить его в тег параметра значение и текст. Я не уверен, как пройти через это, по крайней мере, с JSDOM.