はじめに
業務でHTMLタグを動的に生成しそこにデータベースのデータを渡して画面上に表示する方法を
教えていただいたので自分用のメモと、記事を書く練習としてあげます。
ソースコード
以下DOMを用いた例となります。
HTML
<div class="content">
<p id=displayTitle>
タイトル
</p>
<div id="displayBox" class="displayBox">
<!-- ここに動的に生成したpタグが入ります！ -->
</div>
</div>
ここでは単純に動的に生成したpタグを入れるためのhtmlファイルを生成します。
#displayBoxに表示したいものをjQueryで生成するためdivタグの中身は空です。
jQueryにおける処理
$.ajax({
type: "GET",
url: '/xxx/display/displayReturn',
dataType: 'json',
//dataはサーバ-から受け取った変数
success: function(data) {
var contents = data;
//displayBoxには画面上に表示するデータを格納する
var $displayBox = $('#displayBox')
//最後にまとめてdisplayBoxに要素を入れるために配列を作る
var addItemList = [];
//拡張for文で受け取ったデータを一つ一つ回す
contents.forEach(function(elem) {
//pタグを定義し"{"以降で要素を入れていきます
var $displayItem = $('<p/>', {
//pタグ内で表示される文章を定義
text : elem.displayText,
//idを定義
id : elem.displaySeq + "d",
//クラス名を付与
class : "displayContent"
})
//生成したpタグに子要素をつける場合
$displayItem.append ($('<span/>', {
class : "children"
}))
//配列に格納します
addItemList.push($helpItem)
});
//画面に渡すための変数にまとめて格納
$displayBox.append(addItemList)
}
ここではajaxを用いてサーバーサイドと通信し取得したdata(引数)のプロパティを動的に生成したpタグの中にぶち込み表示するための処理を示しております。
displayTextにはサーバーサイドでデータベースから取得してきたhtmlで表示するための文章が、displaySeqにはデータベースから取得してきたレコードの連番が入るイメージですね、生成したタグにそれぞれ別のidを付与するために利用します！
例 id="1d"
dはdisplayの頭文字です（笑）
またpタグの下にappendを用いることで子要素としてspanタグ等を作ることもできます。参考のため載せました。ここにFont Awesomeのクラスを付けてあげればアイコン等をそれぞれのpタグに付与してあげることができますね～！
javaの処理(サーバーサイドの処理）
public List<JsonData> displayReturn() {
//DBから表示したいデータを取得する
List<ContentEntity>contents =new ArrayList<ContentEntity>();
contents = displayService.getContents();
//ここでcontentsにはプロパティとしてString型のdisplayText(pタグで表示する文章）とlong型のdisplaySeqを持つcontent型のインスタンスが複数入る
//jsonとして渡す用のリスト
List<JsonData> jsonDataList = new ArrayList<>();
for (ContentEntity entity : contents) {
//json変換用メソッドに値を入れていく
JsonData jsondata = createJsonData(entity.getDisplayText(),entity.getDisplaySeq());
//生成したjsonデータをリストに入れる
jsonDataList.add(jsonData);
}
return jsonDataList;
}
最後にjavaの処理です。順序的にはhtml→jsの非同期通信（successより上の部分)
→javaの処理→jsのDOMの生成となります。javaの部分は重要度が高くないため一番最後に載せました。 action→service→dao→データベースと処理は続きますがここではaction部分のみの掲載です。またprivateメソッドとしてjsondataに変換するためのメソッドがありますが割愛します（笑）
おわりに
DOM要素の生成は最初は難しく感じますが作ってみるとすぐにイメージがつくため参考にしてみてください！
見てくださってありがとうございました！！