2023.08.30

JSを使用したJSONと非同期の学習

kurumin

Contents

HTML
CSS
JS
JSON

HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>一覧画面</title>
  <link rel="stylesheet" href="https://unpkg.com/sanitize.css" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <p>
    店名選択：<select id="shopList">
      <option value=""></option>
      <option value="日本橋本店">日本橋本店</option>
      <option value="新宿店">新宿店</option>
      <option value="長野店">長野店</option>
    </select>
  </p>

  <div id="shopArea">

  </div>
<script src="main.js"></script>
</body>
</html>

CSS

* {
  /* デフォルトをリセット */
  margin: 0px;
  padding: 0px;
}

body {
  margin: 1em 1em 1em 1em;
}

table {
  border-collapse: collapse;
}

th {
  background: #87cefa;
}

th,
td {
  width: 100px;
  border: 1px solid;
  text-align: center;
}

button {
  margin: 10px;
}

.red {
  color: red;
}

JS

let shopName; // 選択した店名
  let shopList = document.getElementById('shopList');

  shopList.addEventListener("change", function (event) {
    shopName = event.target.value;
    let shopForm = document.getElementById('shopForm');

    if (shopName != "" && shopForm) {
      shopForm.remove();
      getJson(shopName);
    } else if (shopName == "" && shopForm) {
      shopForm.remove();
    } else if (shopName != "" && !shopForm) {
      getJson(shopName);
    }
  });

  function getJson(shopName) {
    const url = "shop.json"; // JSONデータ
    let shopInfo; // 店情報
    let shopArea = document.getElementById('shopArea');
    let shopTableHtml = `
    <form action="List.html" id="shopForm">
      <table id="shopTable">
        <tr>
          <th>商品ID</th>
          <th>商品名</th>
          <th>値段(円)</th>
          <th>注文数</th>
          <th>金額(円)</th>
        </tr>
    `;

    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        shopInfo = data[shopName]; // 店名から店情報を取得
        shopInfo.forEach((row, index) => {
          console.log("index:" + index);
          console.log(row["id"] + row["name"] + row["price"]);
          shopTableHtml += `
          <tr>
            <td>${row["id"]}</td>
            <td>${row["name"]}</td>
            <td>${row["price"]}</td>
            <td class="order"></td>
            <td>
              <div class="red" id="kingaku${index}"></div>
            </td>
          </tr>
          `;
        });
        shopTableHtml += `
            </table>
            <div class="red" id="goukei"></div>
            <button type="submit">送信する</button>
          </form>
          `;
        shopArea.innerHTML = shopTableHtml; // テーブルの再生成
        orderList();
      })
      .catch(error => {
        alert('エラー');
      });
  }
  
  orderList();
  /*
   *  注文数
   */
  function orderList() {
    let select = [];
    let order = document.getElementsByClassName("order");

    for (let i = 0; i < order.length; i++) {
      let selectHtml = '<select id="select' + i + '">';
      for (let j = 0; j < 10; j++) {
        selectHtml = selectHtml + '<option>' + j + '</option>';
      }
      order[i].innerHTML = selectHtml + '</select>';

      select[i] = document.getElementById("select" + i);
      select[i].addEventListener("change", calc);
    }
  }

  /*
   *  計算
   */
  function calc() {
    let goukei = 0; // 合計金額（注文数）
    let elements; // form内の要素
    let orderNumber; // 要素の値（注文数）
    let kingakuElement; // 金額を表示する要素
    let price; // 一覧表の値段（円）
    let order = document.getElementsByClassName("order");
    let shopTable = document.getElementById("shopTable");
    let goukeiElement = document.getElementById("goukei");

    for (let i = 0; i < order.length; i++) {
      // NOTE：document.forms・・・文書のすべてのフォームを列挙する
      elements = document.forms[0].elements[i];
      orderNumber = elements.value;
      price = shopTable.rows[i + 1].cells[2].innerText;

      kingakuElement = document.getElementById('kingaku' + i);

      if (orderNumber > 0) {
        kingakuElement.innerHTML = orderNumber * price;
      } else {
        kingakuElement.innerHTML = "";
      }

      goukei += orderNumber * price;
      goukeiElement.innerHTML = "合計支払金額：" + goukei + "円";
    }
  }

JSON

{
  "日本橋本店": [
    {
      "id": "001",
      "name": "りんご",
      "price": "300"
    },
    {
      "id": "002",
      "name": "みかん",
      "price": "400"
    },
    {
      "id": "004",
      "name": "梨",
      "price": "250"
    },
    {
      "id": "005",
      "name": "洋梨",
      "price": "230"
    }
  ],
  "新宿店": [
    {
      "id": "002",
      "name": "みかん",
      "price": "400"
    },
    {
      "id": "003",
      "name": "ぶどう",
      "price": "300"
    },
    {
      "id": "006",
      "name": "柿",
      "price": "200"
    }
  ],
  "長野店": [
    {
      "id": "001",
      "name": "りんご",
      "price": "200"
    },
    {
      "id": "007",
      "name": "甘栗",
      "price": "300"
    }
  ]
}

ABOUT ME

HTML

CSS

JS

JSON

JavaScriptのAJAX通信