JavaScriptでサーブレットから受け取ったリスト型Mapデータを操作する方法

Javaのサーブレットから送られてきたリスト型のMapデータをJavaScriptで扱う場合、まずJSON形式で受け取り、オブジェクトとして保持するのが一般的です。HTMLのセレクトボックスの変更に応じて対応するリストデータを表示する方法について解説します。

サーブレットからJSONでデータを送信
JavaScriptでデータを受け取る
セレクトボックスの変更に応じて一覧表示
まとめ

サーブレットからJSONでデータを送信

サーブレット側でMapやListをJSONに変換して返します。例えばGsonを使うと簡単です。

Gson gson = new Gson();
String json = gson.toJson(mapData);
response.setContentType("application/json");
response.getWriter().write(json);

JavaScriptでデータを受け取る

fetchなどでサーブレットからJSONを取得し、オブジェクトとして保持します。

let dataMap = {};
fetch('/yourServlet')
  .then(response => response.json())
  .then(json => { dataMap = json; });

セレクトボックスの変更に応じて一覧表示

セレクトボックスのイベントリスナーで選択値を取得し、dataMapから該当リストを取り出してHTMLに表示します。

document.getElementById('mySelect').addEventListener('change', function() {
  const selectedKey = this.value;
  const list = dataMap[selectedKey];
  const listContainer = document.getElementById('listContainer');
  listContainer.innerHTML = '';
  if(list) {
    list.forEach(item => {
      const li = document.createElement('li');
      li.textContent = item;
      listContainer.appendChild(li);
    });
  }
});