https://www.quicpay.jp/assets/js/microcms_detail.js

1(function ($) {
2  const endpoint = "https://qpsc.microcms.io/api/v1/announcement_qp/";
3  //APIキーの取得
4  const apiKey = "BwyjST90g0M053N1p4ToPxFdbQyZjuP6eaNC";
5  //データ取得のためのオプション設定
6  const options = {
7    headers: {
8      "X-API-KEY": apiKey,
9    },
10  };
11  //fetch APIを使用してデータ取得
12  fetch(endpoint, options)
13  .then((response) => {
14        //レスポンスのチェック
15        if (!response.ok) {
16          throw new Error("Network response was not ok");
17        }
18        return response.json();
19  })
20  .then((data) => {
21        //取得したデータの処理
22        if (data.contents && data.contents.length > 0) {
23            i =0;
24            j =1;
25            data.contents.forEach(item => {
26              // ここに発火させたい処理を追加
27              const targetId = `detail_title_ttl${j}`; // 確認したいID
28              const targetElement = document.getElementById(targetId);
29              if (targetElement) {
30                // IDが存在する場合
31                // titleタグの記載
32                const detail_title_ttl = document.querySelector(`#detail_title_ttl${j}`);
33                detail_title_ttl.innerText = data.contents[i].detail_title + "｜QUICPay";
34                // タイトルの記載
35                const detail_title = document.querySelector(`#detail_title${j}`);
36                detail_title.innerText = data.contents[i].detail_title;
37                if (data.contents[i].detail_date) {
38                  // 公開日時の記載
39                  const dateTime = data.contents[i].detail_date;
40                  function formatDate(dateString) {
41                    const date = new Date(dateString);
42                    const year = date.getFullYear();

43                    const month = String(date.getMonth() + 1).padStart(2, '0');
44                    const day = String(date.getDate()).padStart(2, '0');
45                    return `${year}/${month}/${day}`;
46                  }
47                  const formattedDate = formatDate(dateTime);
48                  document.getElementById(`dateDisplay${j}`).innerText = formattedDate;
49                }
50                // パンくずリストのタイトル箇所の記載
51                const detail_title_topic = document.querySelector(`#detail_title_topic${j}`);
52                detail_title_topic.innerText = data.contents[i].detail_title;
53                // 本文箇所の記載
54                const detail_text = document.querySelector(`#detail_text${j}`);
55                detail_text.innerText = data.contents[i].detail_text;
56                // リンク箇所の記載
57                if (data.contents[i].detail_link && data.contents[i].detail_link.length > 0) {
58                  k=0;
59                  l=1;
60                  data.contents[i].detail_link.forEach(item => {
61                  // リンクテキスト箇所の記載
62                  const detail_link = document.querySelector(`#detail_link${l}`);
63                  detail_link.innerText = data.contents[i].detail_link[k].detail_link_txt;
64                  // リンクURL箇所の記載
65                  const detail_link_dest = document.querySelector(`#detail_link${l}`);
66                  detail_link_dest.href = data.contents[i].detail_link[k].detail_link_dest;
67                  // リンクの別win同win判定
68                  if (data.contents[i].detail_link[k].detail_link_window) {
69                    detail_link.classList.add('m-txtLink-external');
70                    detail_link.setAttribute('target', '_blank');
71                  }
72                  else{
73                    detail_link.classList.add('m-txtLink');
74                  }
75                  k++;
76                  l++;
77                  })
78                }
79              }
80              i++;
81              j++;
82            });
83        }
84  })
85  .catch((error) => {
86    //エラー処理
87    console.error("There was a problem with the fetch operation:", error);
88  });
89})(jQuery);