node.jsで取得した配列をhtmlのselectタグに表示させたいです。

今回データベースから取得したデータをドロップダウン内に表示させる必要があり、node.jsを手探りで扱っております。
データベースとしてはGoogle BigQueryになります。
今回やりたいことは以下になります。
①BigQueryからテーブル一覧を取得
②①で取得したテーブル名の配列をドロップダウンに表示させる
optionタグの中身がlistTables()で取得したテーブル一覧になります。

①番目のテーブル名の配列を取得はできてます。
そこでnode.jsで取得したデータをhtml上に組み込むのに苦戦してます。
jsに関してかなり慣れない所も有り、初歩的な質問かもしれ無いので大変恐縮なのですが、アドバイス頂けると幸いです。
よろしくお願いします。

index.js

function listTables() {
    const {BigQuery} = require('@google-cloud/bigquery');
  
    const bigquery = new BigQuery({
      projectId: 'test_project',
    });
  
    // Lists all tables in the dataset
    bigquery
        .dataset("test_table")
        .getTables()
        .then(results => {
            const tables = results[0];
            console.log('Tables:');
            tables.forEach(table => console.log(table.id));
        })
        .catch(err => {
            console.error('ERROR:', err);
        });
    // [END bigquery_list_tables]
}

index.js実行結果

Tables:
test
test1
test2
test3

index.html

<h3>Please choose table</h3>
<select name="slt1" class="slt1" onchange=""></select>

行動規範の内容に同意します

回答1件

ベストアンサー

このようなコードはどうでしょうか

main.js
1// main.js
2// データベースの代わり
3const list = ["test1", "test2", "test3"];
4
5// htmlのselectタグ
6let slt = document.getElementById("slt");
7addTables(slt);
8
9// データを返す関数
10function getList() {
11  return new Promise(function (onFulliflled, onRejected) {
12    onFulliflled(list);
13  });
14}
15
16function addTables(slt) {
17  getList()
18    .then((list) => {
19      for (item of list) {
20        // optionを作成
21        let option = document.createElement("option");
22        option.text = item;
23        option.value = item;
24
25        // optionの追加
26        slt.appendChild(option);
27      }
28    })
29    .catch((err) => {
30      console.error("error", err);
31    });
32}

index.html
1// index.html
2
3<!DOCTYPE html>
4<html lang="ja">
5  <head>
6    <meta charset="utf-8" />
7    <title>sample</title>
8  </head>
9  <body>
10    <h3>Please choose table</h3>
11    <select id="slt" name="slt"></select>
12    <script src="./main.js"></script>
13  </body>
14</html>
15