Newer
Older
2023-ryuei / system / script.js
@Ryuei Ryuei on 29 Aug 2023 1 KB add new files
// GASからJSONデータを取得してHTML要素を生成する
async function fetchAndGenerateData() {
  const response = await fetch('https://script.google.com/macros/s/AKfycbwvVBW5OFxfRBVsKCfvAQg8nnZ2grBQjzrWN7tuJgJsn0zgQ7Pla8jOWy-YxTm0SNBipg/exec');
  const jsonData = await response.json();
  
  // HTML内の要素を取得
  const nameElement = document.getElementById('name');
  const menuContainer = document.getElementById('menuContainer');

  nameElement.textContent = jsonData[0].shopID;

  // JSONデータをもとに要素を生成
  for (const data of jsonData) {
    // div要素を生成し、クラスを追加
    const div = document.createElement('div');
    div.classList.add('menu-item');

    // img要素生成.src属性を設定
    const img = document.createElement('img');
    img.src = data.img;
    div.appendChild(img);

    // h3要素を生成
    const h3 = document.createElement('h3');
    h3.classList.add('menuName');
    h3.textContent = data.menuName;
    div.appendChild(h3);

    // p要素(税抜き価格)を生成
    const p1 = document.createElement('p');
    p1.classList.add('price');
    p1.textContent = `税抜き価格: ${data.price}円`;
    div.appendChild(p1);

    // 税込価格を計算し、p要素(税込価格)を生成
    const taxIncludedPrice = data.price * (1 + data.taxRate);
    const p2 = document.createElement('p');
    p2.classList.add('price');
    p2.textContent = `税込価格: ${taxIncludedPrice.toFixed(0)}円`;
    div.appendChild(p2);

    // 生成したdiv要素をmenuContainerに追加
    menuContainer.appendChild(div);
  }//8/29 やっとうごいたーーー
}

window.addEventListener('DOMContentLoaded', fetchAndGenerateData);