質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

8369閲覧

JQueryでlistの中のmapを取り出す方法について

zenexvs

総合スコア12

JSP

JSP(Java Server Pages)とは、ウェブアプリケーションの表示レイヤーに使われるサーバーサイドの技術のことです。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

Spring

Spring Framework は、Javaプラットフォーム向けのオープンソースアプリケーションフレームワークです。 Java Platform上に、 Web ベースのアプリケーションを設計するための拡張機能が数多く用意されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/09/09 08:42

編集2016/09/12 06:30

jQueryでlistの中に入っているmapをkeyごとに取り出し、JSPに表示させたいです。
できればtext()で表示したいです。
ご回答お願いします。

<JSP> ```ここに言語を入力

<%@ page language="java" contentType="text/html; charset=UTF-8"```ここに言語を入力
<%@ pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form"%>
<%@ page session="false" %>

<html> <head> <title>Home</title> </head> <body> <f:form> <div id="title_st">日次レッスン登録</div>
<div class="centering"> <p>原宿校 KWP1 2016/7/13 15:00~16:00</p> </div> <div class="centering"> <table class="tb_day_lesson_edit_search"> <tr> <td>教室</td> <td> <select name="lesson_search1"> <option value="教室名1" disabled> レッスン名を選択してください </option> <option value="教室名2">原宿校</option> <option value="教室名3">妙典校</option> <option value="教室名4">下北沢校</option> </select> <tr> <td>レッスン名 <td> <select name="lesson_search2"> <option value="0" disabled> レッスン名を選択してください </option> <option value="1">KWP1</option> <option value="2">KWP2</option> <option value="3">KWP3</option> </select> <tr> <td>レッスン日 <td> <input size="5" type="text" name="jikan" id="date"> <tr> <td>時間 <td> <input size="5" type="text" name="jikan" value="16:00">~ <input size="5" type="text" name="fun" value="17:00"> </td> </tr> </table> </div>
<div class="centering"> <table class="tb_day_lesson_edit_record" style="display: none;">
<%-- <c:forEach var="obj" items="${data}" begin="1" > <tr>このような形式でkeyをとってlistの中の値を表示したい。 <td><c:out value="${obj.value}"/></td> <td> <input type="radio" name="example" value="サンプル">出 <input type="radio" name="example" value="サンプル">欠 </td> </tr> </c:forEach> --%> </table> </div>

</f:form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script> $(function() { $('[name=lesson_search2]').change(function() { $.ajax({ type : "GET", url : "user", // リクエストURL data : "lesson=" + $('[name=lesson_search2]').val(), datatype: "json", success: function(data){ //通信に成功したときに表示されるアラートです $(".tb_day_lesson_edit_record").show(); }, error: function(data){ console.log(data); alert("値はコンソール参照"); } }); }); }); </script> </body> </html>
<controller> ```ここに言語を入力 package jp.co.xmdd; import java.util.ArrayList; import java.util.List; import java.util.Locale; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.google.gson.Gson; import dao.Dao; /** * Handles requests for the application home page. */ @Controller public class HomeController { @Autowired private Dao Dao; @RequestMapping(value = "/", method = RequestMethod.GET) public String home(Locale locale, Model model) { return "home"; } @ResponseBody//こちらを使っています。 @RequestMapping(value = "/user",produces="text/html;charset=UTF-8", method = RequestMethod.GET ) public String UserreturnGET(String lesson){ //非同期で値を受け取ってきている。 System.out.println(lesson); int i = Integer.parseInt(lesson); List<Map<String,Object>> ke = Dao.getUser(i); //mapをlistの中に入れてデータベースからDAOで取ってきている。 Gson gson = new Gson();//Jsonに変換するためのクラスのインスタンスを生成。 System.out.println(gson.toJson(ke)); return gson.toJson(ke);//Jsonに変換。 } // @ResponseBody // @RequestMapping(value = "/user",produces="text/plain;charset=UTF-8", method = RequestMethod.POST) // public String UserreturnPOST(String lesson){ // // int i = Integer.parseInt(lesson); // List<Map<String,Object>> ke =Dao.getUser(i); // System.out.println(ke); // Gson gson = new Gson(); // System.out.println(gson.toJson(ke)); // return gson.toJson(ke); // // } }
<DAO>
package dao; import java.sql.ResultSet; import java.sql.SQLException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import form.*; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.jdbc.core.RowMapper; import org.springframework.stereotype.Repository; @Repository public class Dao { @Autowired private JdbcTemplate jdbcTemplate; public List<Map<String,Object>> getUser(int i) { List<Map<String, Object>> list = jdbcTemplate.queryForList("select * from jukousei where lesson_id= ?", i); List<Map<String,Object>> tes = new ArrayList<Map<String,Object>>(); for(Map<String,Object> result:list){ Map<String,Object> us = new HashMap<>(); us.put("id", (long)result.get("jukou_id")) ; us.put("name",(String)result.get("jukou_name")) ; us.put("flag",(boolean)result.get("syusseki_flag")) ; tes.add(us); } return tes; } }

選択したボタンによって受け取ってくるデータは変わりますが、2を選択して、Jsonに変換した
データは以下になります。

[{"flag":true,"name":"博","id":2},{"flag":false,"name":"倉田","id":4}]

上記以外にもう一つ列名にIDが存在していて、それをもとに検索をかけています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/09/09 08:58

具体的にHTMLおよびCSS、JavaScriptなどを質問文に追記いただいたほうが回答を得られやすいと思います。「list」とは?「map」とは?その「key」とは?
zenexvs

2016/09/12 04:18

遅れて申し訳ありません。詳しく追記しました。 ご回答の方よろしくお願いします。
kei344

2016/09/12 05:16

「return gson.toJson(ke);」で返されるJSONも追記できませんか?
zenexvs

2016/09/12 06:32

追記しておきました。 よろしくお願いいたします。
guest

回答2

0

ベストアンサー

雑ですが。

JavaScript

1success: function( data ){ // ajaxで「datatype: "json"」にしていたらパースされたJSONが入っているはず 2 console.log(data); // これで中身がわかると思うのですが・・・。 3 var $_t = $( '.tb_day_lesson_edit_record' ) 4 if ( data.length && data[ 0 ] && data[ 0 ].id > 0 ) { 5 var l = data.length, res = '', i; 6 for ( i = 0; i < l ; i++ ) { 7 res += '<tr data-id="' + data[ i ].id + '">'; 8 res += '<td>' + data[ i ].name + '</td><td>'; 9 res += '<label><input type="radio" name="example" value="サンプル"'; 10 res += ( data[ i ].flag ) ? ' checked' : ''; 11 res += '>出</label>'; 12 res += '<label><input type="radio" name="example" value="サンプル"'; 13 res += ( data[ i ].flag ) ? '' : ' checked'; 14 res += '>欠</label>'; 15 res += '</td></tr>'; 16 } 17 $_t.html( res ).show(); // .text() じゃないけど。 18 } else { 19 // JSONが「'[{"flag":true,"name":"博","id":2},{"flag":false,"name":"倉田","id":4}] '」では無かった場合 20 } 21},

投稿2016/09/12 20:30

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zenexvs

2016/09/13 00:12

ソースコードの掲示ありがとうございます。私も質問した後、data lengthをつかったif文に取り組んでいたのですが、どうしても文字数を取ってきてしまいます。原因わかりますでしょうか。ご回答よろしくおねがいします。
kei344

2016/09/13 04:44

console.log(data); の結果がオブジェクトではなくテキストになっていませんか? jQuery.isArray(data)で配列か確認することも出来ます。
zenexvs

2016/09/13 05:15

無事表示することができました。ありがとうございます。 お世話になりました!!
guest

0

おそらく回答するためにはlistの仕様としてmapとkeyがどう格納されている想定なのかを
提示する必要があります。またJSPで表示するということはjQueryではJSONか何かで
データ送信するだけでいいのでしょうか?

投稿2016/09/09 08:52

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zenexvs

2016/09/12 02:31

遅れてしまって申し訳ありません。 ajax通信でコントローラーに送り、JSONでデータをJSP側に戻して、J Queryで表示という形にしたいです。詳しくは情報を更新したので、ご覧になればわかると思います。 よろしくお願いいたします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問