2020.07.08
【javascript】HTML生成を伴うループ処理の落とし穴
こんばんは。Javascriptにやっと慣れてきた今日この頃。
毎度思いますが、TERATAILの有能な有識者には頭が上がりません。ああいうスマートな人間になりたいものだ。
今回はJavascriptでのループ処理で思わぬ落とし穴にはまったので備忘録として纏めておきます。
ループ処理の致命的な間違い
JSONデータを取得してその件数に合わせてHTMLもその件数分生成する場合
jsonデータの件数分親要素直下に子要素を生成する場合、注意したいことはappendする順番です。
最初に親(ここでいうrecruiting)となる要素を生成してしまうとループするごとにその親要素にもまた子要素がappendされる事態になります。
下記画像参照
1巡目
2巡目
3巡目
なので、最初に空の親要素を変数として格納し、その空要素の中に子要素となる
ものをappendしていきます。
最後に親要素の上階層の親要素にappendしていけば、子要素の重複はなくなります。
一巡目：genre>recruiting>station+role+age
二巡目：genre>recruiting+recruiting>station+role+age
ダメなやつ
$(document).ready(function () {
$.getJSON("data/sample_data.json", function(data){
for(var i in data){
$("#genreTab0").append("<div class=\"recruiting\"></div class=\"recruiting\">");
$(".recruiting").append("<p class=\"station\">"+data[i].station+"</p>");
$(".recruiting").append("<p class=\"role\">"+data[i].role+"</p>");
$(".recruiting").append("<p class=\"age\">"+data[i].age+"</p>");
}
});
});いいやつ
$(document).ready(function () {
$.getJSON("data/sample_data.json", function(data){
for(var i in data){
var a=$("<div class=\"recruiting\"></div class=\"recruiting\">");
a.append("<p class=\"station\">"+data[i].station+"</p>");
a.append("<p class=\"role\">"+data[i].role+"</p>");
a.append("<p class=\"age\">"+data[i].age+"</p>");
$("#genreTab0").append(a);
}
});
});