前回は、JavaからDB情報をJSON形式でGET通信するところまでやりました。この状態ではindexにアクセスした時、JSON文字列でのHTML表示となってしまいます。今回は、JSON文字列をテーブルとしてHTML表示させたいと思います。
前回の記事はこちら↓
前回からの修正
一枚のHTML上に送られてきたJSONファイルを表示＆インサートを実装したいと考えておりますので、JavaのControllerのPath（Value）を変更します。
// 表示用のパスをindexにします。
@RequestMapping(value="/index")
public String top() {
return "index";
}
// 前回indexで定義したJSON受け渡し用のパスをdataにします。
@RequestMapping(value="/data",method=RequestMethod.GET)
@Transactional
@ResponseBody
public List<AccountEntity> users(){
List<AccountEntity> users = repository.findAll();
return users;
}
index.htmlの作成
JSON表示には、thymeleafを使わないので、インポートしてもしなくてもどちらでもOKです。
JSONにはAjaxを使いますので、jQueryを読み込みます。
jQueryはダウンロードしてもよいですが、CDNを経由して読み込むことで、ダウンロードの手間が省けるため便利です。
jQueryダウンロードはこちら
CDNの読み込みは方法は、「jQuery CDN」と検索して新しいヴァージョンのものをscriptタグで呼び出してください。
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head>
JSONデータ表示のコードはこちらです↓
HTMLの中にJSを書いていることはご愛嬌ということでお願いします。。。
<h1>JSONで受け取って表示をしています</h1>
<table id="wrap">
<!-- この中にJSONデータが表示されます -->
</table>
<!-- JSON受け取りと表示 -->
<script>
var data = [];
$.ajax({
type : 'GET',
url : 'data',
dataType : 'json'
}).then(
function(json) {
for (var i = 0; i < json.length; i++) {
data.push({
// エスケープ回避のためのコメントなので無視してください<code>[i]</code>
'userName' : json[i].userName,
'enabled' : json [i].enabled,
'admin' : json [i].admin
});
}
;
var j = '<tr><th>名前</th><th>有効フラグ</th><th>管理者権限</th></tr>';
$("table#wrap").append(j);
for (var i = 0; i < data.length; i++) {
var h = '<tr><td>' + data[i].userName + '</td>'
+ '<td>' + data[i].enabled + '</td>' + '<td>'
+ data[i].admin + '</td></tr>';
$("table#wrap").append(h);
}
});
</script>
JSONから中身を取り出して、append()でHTMLを構築します。以上でHTML上にtableが出来上がりました！
次回は、insertのための受け渡しをJSONでやる。を実装していきます。
