https://benesse.jp/berd/_assets/js/script.js

1$(function () {
2  const DATA_JSON_URL = "/berd/_assets/json/data.json";
3
4  let originalData = [];
5  let displayData = [];
6
7  $.getJSON(DATA_JSON_URL, function (payload) {
8    originalData = payload;
9    changeDisplayData(filteringNewsData());
10  });
11
12  const filteringNewsData = () => {
13    return originalData;
14  };
15
16
17
18  // 表示データの更新があったときにページネーションなども含めて更新する
19  const changeDisplayData = (newData) => {
20    displayData = newData;
21    updateNewsList();
22  };
23
24  // ニュースリスト
25  const $newNews = $(".js-newNews");
26  const updateNewsList = () => {
27    
28    const newNews = displayData.slice(0,4); // 最新情報を4件取り出す
29
30    newNews.forEach((item) => { // HTML形成
31      const $_info = $(`<div class="news__list-info"></div>`)
32      const $_date = $(`<p class="news__list-info-date">${item.date}</p>`)
33      const $_cont = $(`<div class="news__list-info-tag"></div>`)
34      const $_link = $(`<a href="${item.link}" class="news__list-link"></a>`)
35
36      $_info.append($_date);
37      const tag = item.tag;
38      for (i = 0; i < tag.length; i++) {
39        const $_tag = $(`<p class="news__list-info-tag-item">${tag[i]}</p>`)
40        $_cont.append($_tag);
41      }
42      $_info.append($_cont);
43      const $_ttl = $(`<p class="news__list-link-txt">${item.title}</p>`)
44      $_link.append($_ttl);
45
46      $newNews.append($_info);
47      $newNews.append($_link);
48    });
49
50    const event = $(".js-eventInfo .news__list-link");
51    for (i = 0; i < event.length; i++) {
52      const num = $(event[i]).data("num"); // data-numの値を取得
53      const eventInfo = displayData.slice(num - 1,num); // 該当する順番のデータを取得
54      eventInfo.forEach((item) => {
55        $(event[i]).attr("href", item.link); // リンク設定
56        const $_link = $(`<p class="news__list-link-txt">${item.title}</p>`)
57        $(event[i]).append($_link);
58      });
59      
60    }
61  };
62});