JavaのMapオブジェクトをjavascriptで参照したい

Question

検索キーワードが悪いのかこれだと欲しい情報にたどり着けずこちらに投稿する事にしました。
識者の方々、何卒宜しくお願い致します。

###問題
SpringbootのコントローラクラスでMapオブジェクトをmodel.addAttributeしてView側のjavascriptでうまく参照できずに困っています。
「model.addattribute javascript map」等々でググったのですが、欲しい情報が見つかりませんでした。
結局、
参考サイト
この辺りを参考に実装した見たのですが、どうにも...。

###ソースコード
ctrl.java

Map<String, String> testMap = new HashMap<String, String>();
		
testMap.put("0001", "開発課");
testMap.put("0002", "経理課");
		
JSONObject testObj = new JSONObject(testMap);
		
model.addAttribute("map", testObj.toString());

view.html

<script th:inline="javascript">
$(function(){

    $('#aaa').change(function() {

        /*<![CDATA[*/
        var bumonMap = /*[[${map}]]*/'';
        /*]]>*/

        console.log(bumonMap);

        var result = bumonMap['0001'];

        console.log(result);
    });
});
</script>

###実行結果
javascriptをデバッグで見てみるとconsole.log(bumonMap)では

{"0002":"経理課","0003":"営業課","0001":"開発課"}

と連想配列っぽいものが入っているのですが、console.log(result)はundefinedになっています。

###開発環境

• OS Windows10 professional x64
• IDE Eclipse 4.8 Photon
• Thymeleaf 3.0.2.RELEASE
• 言語 Java
• TOMCAT 9.0.30
• Java 11
• プロジェクト形式 Gradleプロジェクト

Comments

[m.ts10806]

>連想配列っぽいもの

では誰にもなにも伝わらないので実際の出力内容を提示してください。

というか、changeでajaxにして必要な情報だけ受け取った方が良いのでは。

[makoyang]

console.log(bumonMap)の実際の出力内容です。

{"0002":"経理課","0003":"営業課","0001":"開発課"}

[m.ts10806]

質問は編集できますので追記してください

[YT0014]

JSONObject 使っているから、JSON で渡ってきていますね。
あとは、がんばって。

[退会済みユーザー]

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/LiveConnect_Overview

使えるブラウザがインストールできるかどうかはべつとしてこれをどうぞ（ｗ

Answer 1

javaが適切な文字列を渡してくれるならjavascript側で読むことはできるでしょう

Answer 2

数日他の仕事をやっていたのでレス遅れましたが、解決しました。
ヒントをくれた方々、ありがとうございました。

    var bumonJson = $.parseJSON(bumonMap);

    var devName = bumonJson['0001'];
    console.log(devName); // 開発課