月別の写真をランダムに表示
月別の写真をランダムに表示するためのコード。
データはjson形式で作成し、現在月のデータの中からランダムに1件を選択し表示するものです。
【test.html】
<div id=”monthly-content”><!– ここにデータが表示されます –></div>
<script>
// 現在の月を取得
const currentMonth = (‘0’ + (new Date().getMonth() + 1)).slice(-2);
// JSONファイルからデータを読み込む
var datafile = ‘/data/data.json’;
fetch(datafile)
.then(response => response.json())
.then(data => {
// 現在の月のデータをフィルタリング
const filteredData = data.filter(item => item.mon === currentMonth);
// ランダムにデータを選択
if (filteredData.length > 0) {
const randomItem = filteredData[Math.floor(Math.random() * filteredData.length)];
const title = randomItem.title;
const name = randomItem.name;
// HTML要素にデータを挿入
document.getElementById(‘monthly-content’).innerHTML = `
</p>
<p><a href=”${randomItem.link}”>${title}</a></p>
<p>
<a href=”${randomItem.link}”><img src=”${randomItem.filename}” alt=”${title}”></a>
</p>
<p style=”text-align:center;”>${name}</p>
<p>
`;
} else {
document.getElementById(‘monthly-content’).innerHTML = ‘</p>
<p>No data available for this month.</p>
<p>’;
}
})
.catch(error => {
console.error(‘Error loading data:’, error);
document.getElementById(‘monthly-content’).innerHTML = ‘</p>
<p>Error loading data.</p>
<p>’;
});
</script>
【 data.json 】
[
{
“mon”: “01”,
“name”: “Aさん”,
“title”: “題目A”,
“filename”: “a.jpg”,
“link”: “/images/”
},
{
“mon”: “01”,
“name”: “Bさん”,
“title”: “題目B”,
“filename”: “b.jpg”,
“link”: “/images/”
},
｜
{
“mon”: “12”,
“name”: “Zさん”,
“title”: “題目Z”,
“filename”: “z.jpg”,
“link”: “/images/”
}
]
