<h1 class="bandname">はっぴいえんど</h1>
<div class="spec">
<section class="album">
<h2 class="title"></h2>
<p class="release"></p>
<ol class="track"></ol>
</section>
</div>
</section>
//jsonファイルURL
var dmain = 'dl.dropboxusercontent.com';
var directory = 's/x6tsr4ah8cfe9ta';
var file = 'happyend';
var url = 'https://' + dmain + '/' + directory + '/' + file + '.json';
//json読み込み
fetch(url)
.then(function(response) {
return response.json();
})
.then(function(json) {
//外枠アクセス
var spec = document.querySelector('.spec');
//テンプレ複製
//(アルバム枚数-1枚)
for (var i=1; i < json.length; i++) {
var clone = spec.firstElementChild.cloneNode(true);
spec.appendChild(clone);
}
//タイトル、発売日、曲名アクセス
var specTitle = document.querySelectorAll('.title');
var specRelease = document.querySelectorAll('.release');
var specTrack = document.querySelectorAll('.track');
//アルバムデータ入力(アルバム枚数分)
for (var i=0; i < json.length; i++) {
//タイトル入力
specTitle[i].innerHTML = json[i].title;
//発売日入力
specRelease[i].innerHTML = json[i].release;
//曲名入力(曲数分ループ)
for(var t=0; t < json[i].track.length; t++) {
var list = document.createElement('li');
list.innerHTML= json[i].track[t];
specTrack[i].appendChild(list);
}
}
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.