動的なフォームからスプレッドシートにデータを書き込みたい。

実現したいこと

動的なフォームで追加したテキストボックス等に入力した値を全て取得して、
スプレッドシートに書き込みたいです。

↓
↓

※画像は処理のイメージです。

前提

Gasで食品を記録するWebアプリを作っています。
内容は、動的なフォーム（追加ボタンでテキストボックス等が増える）で入力した値をスプレッドシートに出力するというものです。

今回は、処理の過程でうまく全ての値が出力されません。
追加したオブジェクト入力した値の一部しか取得できていないことは分かっているのですが、どのようにしたら全ての値を取得してスプレッドシートに出力できるのか全くわからず、結果お手上げ状態です。
間違いや違う方法などがありましたらお教え頂けると幸いです。
よろしくお願い致します。

＜追記＞
初心者のためネット上のコードを参考にしている部分が多々あります。
また、説明が下手でわかりにくい部分も多くあると思いますがご容赦下さい。

発生している問題・エラーメッセージ

追加ボタンでテキストボックス等を増やし、情報を入力して「送信」ボタンを押したところ、
果物のデータだけがスプレッドシートに記載されません。
（エラーは出てないので、果物のデータが取得できていないか上書きされている可能性があります。）

↓
↓

該当のソースコード

gas
1// WebアプリのHTML
2const doGet = (e) =>{
3  const page = (e.parameter.p || "form");
4  return htmlOutput = HtmlService.createTemplateFromFile(page)
5    .evaluate()
6    .setTitle('食品アプリ')
7    .addMetaTag('viewport','whidth=device-width,initial-scale=1');
8};
9
10
11// スプレッドシートに書き込み
12function addRowToSheet(tag, item, ...dynamicData) {
13  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('食品DB');
14  var lastRow = sheet.getLastRow() + 1;
15
16  sheet.getRange(lastRow, 1, 1, 2).setValues([[tag, item]]);
17
18  // ダイナミックなデータを順番に書き込む
19  for (var i = 0; i < dynamicData.length; i++) {
20    console.log('Writing dynamic data:', dynamicData[i]);
21    sheet.getRange(lastRow, 3 + i).setValue(dynamicData[i]);
22  }
23}

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <base target="_top">
5    <title>サンプルページ</title>
6    <script>
7      //スプレッドシートに書き込み
8      function submitForm() {
9        // フォームの内容を取得
10        var tag = document.getElementById('tag').value;
11        var item = document.getElementById('item').value;
12
13        // 新しく追加される行のデータを取得
14        var dynamicTable = document.getElementById('dynamic-table');
15        var lastRow = dynamicTable.rows[dynamicTable.rows.length - 1];
16        var rowId = "row-" + dynamicTable.rows.length;
17
18        var tagDynamic = document.getElementById(rowId + '-tag').value;
19        var itemDynamic = document.getElementById(rowId + '-item').value
20
21        // Google Apps Script 関数を呼び出してスプレッドシートに行を追加
22        google.script.run.addRowToSheet(tag, item, tagDynamic, itemDynamic);
23      }
24      
25      // プラスボタンをクリックしたときに新しいテキストボックスを追加する関数
26      function addTextBox() {
27        var table = document.getElementById('dynamic-table');
28        var newRow = table.insertRow(-1);
29        var rowId = "row-" + table.rows.length; // 新しい行のIDを動的に生成
30
31        var cell1 = newRow.insertCell(0);
32        var cell2 = newRow.insertCell(1);
33        var cell6 = newRow.insertCell(2);
34
35        cell1.innerHTML = '<select id="' + rowId + '-tag"><option value="">タグ</option><option>野菜</option><option>果物</option><option>肉</option><option>魚</option></select>';
36        cell2.innerHTML = '<input type="text" id="' + rowId + '-item" placeholder="種類">';
37        cell3.innerHTML = '<button onclick="removeRow(this)">削除</button>';
38      }
39
40      // マイナスボタンをクリックしたときに行を削除する関数
41      function removeRow(button) {
42        var row = button.parentNode.parentNode;
43        row.parentNode.removeChild(row);
44      }
45    </script>
46  </head>
47  <body>
48    <form>
49      <table id="dynamic-table">
50        <tr>
51          <td>
52            <select id="tag">
53              <option value="">タグ</option>
54              <option>野菜</option>
55              <option>果物</option>
56              <option>肉</option>
57              <option>魚</option>
58            </select>
59          </td>
60          <td>
61            <input type="text" id="item" placeholder="種類">
62          </td>
63         </tr>
64      </table>
65    </form>
66    <!-- プラスボタン -->
67    <button onclick="addTextBox()">追加</button><br>
68    <button onclick="submitForm()">送信</button>
69
70  </body>
71</html>

試したこと

html側のスクリプトで、新しく追加されたフォームテーブルの最終行の値を取得していることに気づいたため、以下のコードに変更。
全ての値を取得できるように書き直してみたが、値は取得されずgas側への受け渡しもできていません。
（もちろんスプレッドシートへの書き込みもされません）

gas
1// スプレッドシートに書き込み
2function addRowToSheet(tag, item,  ...dynamicData) {
3  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('食品DB');
4  var lastRow = sheet.getLastRow() + 1;
5
6  sheet.getRange(lastRow, 1, 1, 2).setValues([[tag, item]]);
7
8  // ダイナミックなデータを書き込む
9  for (var i = 0; i < dynamicData.length; i++) {
10    console.log('Writing dynamic data:', dynamicData[i]);
11    sheet.getRange(lastRow, 3 + i).setValue(dynamicData[i]);
12  }
13}

html
1//スプレッドシートに書き込み
2      function submitForm() {
3        // フォームの内容を取得
4        var tag = document.getElementById('tag').value;
5        var item = document.getElementById('item').value;
6
7        // 新しく追加される行のデータを取得
8        var dynamicTable = document.getElementById('dynamic-table');
9        var dynamicData = [];
10
11        for (var i = 1; i < dynamicTable.rows.length; i++) {
12          var rowId = "row-" + i;
13          var tagDynamic = document.getElementById(rowId + '-tag').value;
14          var itemDynamic = document.getElementById(rowId + '-item').value;
15
16          dynamicData.push([tagDynamic, itemDynamic]);
17        }
18
19        // Google Apps Script 関数を呼び出してスプレッドシートに行を追加
20        google.script.run.addRowToSheet(tag, item, dynamicData);
21      }

↓
↓

補足情報（FW/ツールのバージョンなど）

デプロイは変更の都度しています。

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

回答1件

ベストアンサー

GASはサーバー上のアプリケーション
htmlはクライアント側のwebブラウザ上で動作するアプリケーションであるため、
google.script.runはクライアントとサーバー間で通信が発生するので、オブジェクトを渡すことは出来ないはずです
数値型や文字列型のような単純な型の引数しか渡せないと思います。

しかし、オブジェクト型をjsonstringに変換して文字列でサーバーに送信し、サーバー(gas)側でjsonParseすれば、jsonstringをオブジェクトに戻すことが出来ます。

以下chatGPTで作成した、JSON.stringifyとJSON.parseを使用した簡単なサンプルです

html
1<!DOCTYPE html>
2<html>
3<head>
4  <base target="_top">
5</head>
6<body>
7  <button onclick="sendData()">Send Data to Google Apps Script</button>
8
9  <script>
10    function sendData() {
11      // サンプルオブジェクト
12      var sampleObject = {
13        key1: 'value1',
14        key2: 'value2'
15      };
16
17      // オブジェクトをJSON文字列に変換
18      var jsonString = JSON.stringify(sampleObject);
19
20      // Google Apps Scriptの関数を呼び出し
21      google.script.run.withSuccessHandler(onSuccess).processData(jsonString);
22    }
23
24    function onSuccess(response) {
25      // Google Apps Scriptからの応答を処理
26      console.log('Response from Google Apps Script:', response);
27    }
28  </script>
29</body>
30</html>

javascript:gas側
1function processData(jsonString) {
2  // JSON文字列をオブジェクトにパース
3  var dataObject = JSON.parse(jsonString);
4
5  // パースしたオブジェクトの処理（ここではログに出力）
6  Logger.log('Received data from the browser:', dataObject);
7
8  // 応答を返す（任意の応答を返すことができます）
9  return 'Data processed successfully!';
10}