Q&A
> MAPっぽい値が取得できています。
これを、フロントエンド側のコンソールで中身を確認しましたか？
JAVAから送り込んだMAPオブジェクトを、jqueryで扱う方法がわかりません。
初歩的なことで恐縮ですが、ご教示ください。
java
1// 要は、slctTypeMapという名のMAPを送っています。 2ModelAndView initMV(ModelAndView mav) { 3 mav.setViewName("index"); 4 mav.addObject("slctTypeMap", getMap()); 5 return mav; 6} 7 8Map getMap() { 9 Map<String, String> map = new HashMap<String, String>(); 10 map.put("", "0"); 11 map.put("さかな", "1"); 12 map.put("とり", "2"); 13 map.put("うし", "3"); 14}
html
1<body> 2 // MAPを使ってプルダウンを表示しています。これはうまくいきます。 3 <ul> 4 <li><select id="slctType" name="slctType"> 5 <option value="">------------</option> 6 <option th:each="mp : ${slctTypeMap}" th:value="${mp.value}" th:inline="text"> 7 [[${mp.key}]]</option></select></li> 8 </ul> 9 10 <script th:inline="javascript"> 11 var mapObj = /*[[${slctTypeMap}]]*/null 12 // ↑これは画面表示後にF12で確認して、copy elementでscriptタグをコピーすると以下のように取れています。 13 // var mapObj = {"":"0","さかな":"1","とり":"2","うし":"3"}; 14 15 var valueS = mapObj.get("さかな"); 16 // がしかし、mapObj からgetで値を取ろうとすると、エラーになります。 17 </script> 18</body>
エラー内容
Uncaught TypeError: mapObj .get is not a function
at HTMLTableElement.formatter ((index):22)
知りたいのは、javaから送り込んだMAPオブジェクトから、sizeで長さを取得したり、getで値を取得したりする方法です。
よろしくお願いいたします。
回答4件
0
JavaScript
1var mapObj = {"":"0","さかな":"1","とり":"2","うし":"3"};
上記だとmapObjはObject型なのでgetは使えません。
mapObj["さかな"]で参照するか、Map型に変換する必要があります。
JavaScript
1const map = new Map(Object.entries(mapObj))
投稿2020/07/27 08:07
総合スコア246
ありがとうございます。[]で取り出すのですね。
先にご回答いただいたのに、申し訳ありません…。しかも、MAPへの変換の仕方まで！！
これもとても求めていたことです。こういうふうに変換できるのですね。有難いです。
あー…本当にごめんなさい。
ありがとうございました。またよろしくお願いいたします。
0
手元で試したところ、以下でうまく行きました。
scriptタグに th:inline="javascript" を追加するのを忘れると
以下のような出力になってしまいます。これは javascriptとして正しくありません。
ダメ→ const mapObj = /*{=0, とり=2, うし=3, さかな=1}*/ null;
th:inline〜をつけると、以下の様な出力になり、Javascriptとして扱えるようになります。
const mapObj = {"":"0","\u3068\u308A":"2","\u3046\u3057":"3","\u3055\u304B\u306A":"1"};
html
1<!DOCTYPE html> 2<html> 3<head> 4</head> 5<body> 6<ul> 7 <li> 8 <select id="slctType" name="slctType"> 9 <option value="">------------</option> 10 <option th:each="mp : ${slctTypeMap}" th:value="${mp.value}" th:inline="text"> 11 [[${mp.key}]] 12 </option></select> 13 </li> 14 15 <li> 16 <select id="by_js" name="selectType"> 17 </select> 18 </li> 19 20</ul> 21<script th:inline="javascript"> 22 const mapObj = /*[[${slctTypeMap}]]*/ null; 23 24 const selectElement = document.getElementById("by_js"); 25 26 for (let key in mapObj) { 27 console.log("selectに追加します -> " + "key:" + key + " value:" + mapObj[key]); 28 let option = document.createElement("option"); 29 option.text = key; 30 option.value = mapObj[key]; 31 selectElement.appendChild(option); 32 } 33</script> 34</body> 35</html>
投稿2020/07/27 03:13
編集2020/07/27 08:03
総合スコア2027
ご検証ありがとうございます。
記述が漏れていて申し訳ありません。
<script th:inline="javascript">は記述してあり、MAPっぽい値もとれています。
ですが、なぜか、
そこからgetで値を取ろうとするとエラーになってしまいます。
javascriptにMAPだと認識されていないためと推察しますが、解決法がわかりません。
引き続きご教示いただけましたら有難いです。
追記します。
たしかに、こちらの実際のコードでも、"\u3068\u308A"という形にはなっています。
それも引っかかっている原因かもしれないと、"0":"0"などコード値だけで検証してみましたが、状況は変わりません。
なんとなく、ある程度動くものを見ていただいた方がいいと思うので、回答を修正しました。
セレクトボックスが２個に増えていますが、下のセレクトボックスはJavascriptで上と同じ内容を追加したものです。
javascriptでMapにアクセスする場合は、 `map["key"]` のような形でアクセスできるので、getというのは
不要かと思います。
そうなのですね。[]で取り出すのですね。
大変初歩的なところで引っかかっていて、質問のしかたがわるく、失礼いたしました。
今回も大変勉強になりました。ありがとうございました。
0
ベストアンサー
<script th:inline="javascript"> var mapObj = /*[[${slctTypeMap}]]*/null // ↑これは画面表示後にF12で確認して、copy elementでscriptタグをコピーすると以下のように取れています。 // var mapObj = {"":"0","さかな":"1","とり":"2","うし":"3"}; var valueS = mapObj.get("さかな"); // がしかし、mapObj からgetで値を取ろうとすると、エラーになります。 </script> エラー内容 Uncaught TypeError: mapObj .get is not a function
こういうこと?
$ cat xx.js var mapObj = { "": "0", "さかな": "1", "とり": "2", "うし": "3" }; var valueS = mapObj["さかな"]; console.log(valueS); console.log(mapObj.さかな) $ node xx.js 1 1
投稿2020/07/27 13:04
総合スコア4061
ほかの回答を見ないうちにベストアンサーを選んでしまってすみません！！！！（＞ほかの方）
これです！
ありがとうございます。どうにもjavascriptは探りながらやっているので、すごく単純で初歩的なところによく引っかかります。ネットで検索しまくっているのですが、javascript、MAPで検索すると、値の取り出し方がmap.getしか出てこなくて。
大変図々しいお願いですが、このレベルで参考にできるよいサイトをご存じでしたら、お教えいただけるとありがたいです。本でも構いません。javascript苦手を克服したいので。
もちろん、朝イチで検証しまして、無事値を取り出すことに成功しました。
0
直接参照するのではなく、ajaxなどで非同期にJSONオブジェクトとして取得されては。
投稿2020/07/27 02:38
総合スコア80875
コメントありがとうございます。
ajaxで改めて取得しても、やはり、javaで作ったMAPは、javascriptでMAPであると認識されないようです。
何かひと手間が必要なのだと思うのですが、いまのところ見つかっておりません。
引き続き、何かヒントをいただけましたら幸いです。
ちゃんとdataType:JSONにしたうえでコントローラを@ResponseBodyでオブジェクトを返せばJSONになります。
単に「ajaxで改めて取得」と仰っていますが質問本文にそのコードがないのでこちらの意図通りの実装がなされたのかわかりませんし、ヒントも何も出せません。
ありがとうございました。
すみません。ajaxを試す時間的余裕がなく。今現在で言いますと、検証できておりません。
もちろんこれまでに何度も似たようなことをやった経験があったため手を付けなかったのですが。
大変失礼いたしました。
状況を整理してから、もういちどチャレンジしてみようと思います。
では、なぜ、「ajaxで改めて取得しても」とコメントしたのでしょうか。
こういう場であまり嘘はつかれないほうが良いですよ。他人の厚意で成り立つ場なので。
少なくとも私はこれ以上、tohmeyさんの質問は見ようとは思いません。では。
失礼いたしました。
あのあと、取り直すのは後回しにして、MAPをJSONに変換してやりとりすることを試しましたが、うまくいきませんでした。
ありがとうございました。
ajaxで取得しても、というのは、これまでの検証の結果であって、今回のではありませんでした。失礼いたしました。
過去に何度も、試していたものですから。
あなたの回答
tips
プレビュー
