202302161851

by hajime_nagahata

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Excel to JSON Converter</title>
  </head>
  <body>
    <h1>Excel to JSON Converter</h1>
    <input type="file" id="excel-file" accept=".xlsx">
    <button id="convert-button">Convert</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.0/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
    <script>
      const convertButton = document.getElementById("convert-button");
      const excelFileInput = document.getElementById("excel-file");

      convertButton.addEventListener("click", () => {
        const files = excelFileInput.files;
        if (files.length === 0) {
          alert("Please select a file");
          return;
        }

        const file = files[0];
        const fileReader = new FileReader();
        fileReader.onload = (event) => {
          const data = event.target.result;
          const workbook = XLSX.read(data, { type: "binary" });
          const result = {};

          workbook.SheetNames.forEach((sheetName) => {
            const sheet = workbook.Sheets[sheetName];
            const articleId = sheetName;
            result[articleId] = [];

            const sheetData = XLSX.utils.sheet_to_json(sheet);
            const categories = {};
            sheetData.forEach((row) => {
              const categoryCode = row["カテゴリコード"];
              if (!categories[categoryCode]) {
                categories[categoryCode] = {
                  categoryName: row["カテゴリ名"],
                  categoryCode: row["カテゴリコード"],
                  linkUrl: row["カテゴリURL"],
                  itemList: [],
                };
              }
              categories[categoryCode].itemList.push({
                seriesCode: row["シリーズコード"],
                seriesName: row["シリーズ名"],
               ...

CSS

body {
  margin: 3rem;
}