Javascript

よく見るイベント一覧JSONをカレンダー表示してみる

よく見るAPI出力結果

const events = [
  {date: 1, text: "event1 text", image: "event1.jpg"},
  {date: 2, text: "event2 text", image: "event2.jpg"},
  {date: 2, text: "event3 text", image: "event3.jpg"},
  {date: 3, text: "event4 text", image: "event4.jpg"},
];

こんな感じで、日付ごとではなくイベントごとに出力されます。フロントもイベントごとに出力するならこの形でいいと思うのですが、カレンダーなどになると少し撚る(ヒネる)必要があります

日付のループ部分で毎回「events内のxx日のdataを持ってる要素」を検索してたら辛いので、日付でマッピングしてみます。

マッピング処理

const events =[...] //上記参照

const getMappingObject = (arr, baseKey) => {
  return arr.reduce((acc, cur) => {
    acc[cur[baseKey]] = [cur, ...(acc[cur[baseKey]] || [])]
    return acc
  }, {});
};
const map_events = getMappingObject(events, 'date');
console.log(map_events)

実行結果

{
  1: [
    { date: 1, text: "event1 text", image: "event1.jpg" }
  ],
  2: [
    { date: 2, text: "event3 text", image: "event3.jpg" }, 
    { date: 2, text: "event2 text", image: "event2.jpg" }
  ],
  3: [
    { date: 3, text: "event4 text", image: "event4.jpg" }
  ]
}

描画などの処理方法

日付ごとにまとめることができました。あとはカレンダーなどで日付のループ部分で

// ele_td: tableのtd要素
// date: 日付
const event = map_events[date] //先程のマッピングされたデータ
if(event){
  ele_td.classList.add('has_event')
  ele_td.setAttribute('title', event.join(', '))
}

こんな感じです。

 

lodashとか使えばもっと簡単なのかな🤔

コーディング代行

高品質なソースコードをお約束

詳しくはこちら
背景イメージ
背景はFreepikによるデザイン

information

お問い合わせ