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

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

ただいまの
回答率

88.64%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,720

zenexvs

score 12

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が存在していて、それをもとに検索をかけています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/09/09 17:58

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

    キャンセル

  • zenexvs

    2016/09/12 13:18

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

    キャンセル

  • kei344

    2016/09/12 14:16

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

    キャンセル

  • zenexvs

    2016/09/12 15:32

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

    キャンセル

回答 2

checkベストアンサー

0

雑ですが。

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/13 09:12

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

    キャンセル

  • 2016/09/13 13:44

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

    キャンセル

  • 2016/09/13 14:15

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/09/12 11:31

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

    キャンセル

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

  • ただいまの回答率 88.64%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る