javascriptでCSVのinport,Export #JavaScript

chartGPTを使用して試したことのメモ書き

1.jsを使用してCSVをimportし、Tableを作成
2.Tableの値を編集
3.Table上のデータをCSVとして出力

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

<head>
    <meta charset="utf-8" />
    <title>Editable Table with CSV Export</title>
</head>

<body>
    <input type="file" id="csvInput" accept=".csv" onchange="handleFileSelect()" />
    <table id="editableTable">
        <!-- ヘッダー行はここに追加されます -->
    </table>

    <button onclick="exportTableToCSV()">Export to CSV</button>
    <button onclick="addRow()">Add Row</button>

    <script>
        function handleFileSelect() {
            const fileInput = document.getElementById('csvInput');
            const table = document.getElementById('editableTable');

            const file = fileInput.files[0];

            if (file) {
                const reader = new FileReader();

                reader.onload = function (e) {
                    const csvData = e.target.result;
                    displayCSVData(csvData, table);
                };

                reader.readAsText(file);
            }
        }

        function displayCSVData(csvData, table) {
            // CSVデータをパース
            const rows = csvData.split('\n');

            // ヘッダー行を処理
            const headerRow = table.createTHead().insertRow(0);
            const headers = rows[0].split(',');
            headers.forEach(header => {
                const th = document.createElement('th');
                th.textContent = header;
                headerRow.appendChild(th);
            });

            // データ行を処理
            for (let i = 1; i < rows.length; i++) {
                const rowData = rows[i].split(',');
                const newRow = table.insertRow(i);

                rowData.forEach(data => {
                    const cell = newRow.insertCell();
                    const editableContent = document.createElement('div');
                    editableContent.contentEditable = true;
					editableContent.classList.add('valueId');
                    editableContent.textContent = data;
                    cell.appendChild(editableContent);
                });
            }
        }

        function convertToCSV(data, header) {
            const rows = [];
            const header_length = header.length
            // データを3列に整理
            for (let i = 0; i < data.length; i += header_length) {
                const row = Array.from(data.slice(i, i + header_length));
                rows.push(row.join(','));
            }

            // CSVデータを文字列に変換
            //return rows.join('\n');
            return rows;
        }

        function exportTableToCSV() {
            const table = document.getElementById("editableTable");
            const elements = document.querySelectorAll('.valueId');
            const values = Array.from(elements).map(element => element.innerText);
            console.log(values);
            // CSVデータを格納する変数
            let csvData = [];

            // ヘッダー行
            const header = Array.from(table.querySelectorAll("thead th")).map(th => th.innerText);
            csvData.push(header.join(','));
            console.log(header)
            console.log(csvData)
            const rowdatas = convertToCSV(values,header);
            // データ行

            for (let i = 0; i < rowdatas.length; i++) {
                const rowData = Array.from(rowdatas[i].split(","))
                csvData.push(rowData.join(','));
            }

            // CSVデータを文字列に変換
            const csvString = csvData.join('\n');
            // CSVデータをファイルとしてダウンロード
            const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
            const link = document.createElement("a");

            if (link.download !== undefined) {
                const url = URL.createObjectURL(blob);
                link.setAttribute("href", url);
                link.setAttribute("download", "table_export.csv");
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }

        function addRow() {
            const table = document.getElementById("editableTable");
            const newRow = table.insertRow(table.rows.length);

            // 各セルにinputを追加
            for (let i = 0; i < table.rows[0].cells.length; i++) {
                const cell = newRow.insertCell(i);
                const editableContent = document.createElement("div");
                editableContent.contentEditable = true;
				editableContent.classList.add('valueId')
                cell.appendChild(editableContent);
            }
        }
    </script>
</body>

</html>

他の関数との組み合わせ？？？

let initialCsvData = null;

function loadCsvData(csvFilePath) {
  if (initialCsvData !== null) {
    // If data is already loaded, return a resolved Promise with the existing data
    return Promise.resolve(initialCsvData);
  }

  // Otherwise, load the CSV data
  return fetch(csvFilePath)
    .then(response => response.text())
    .then(data => {
      initialCsvData = data;
      return data;
    })
    .catch(error => {
      console.error('Error loading CSV file:', error);
      throw error;
    });
}

function updateFunction() {
  // Example: Load the first CSV data or reuse existing data
  loadCsvData('first_csv_file.csv')
    .then(data => {
      initializeChart(data);
      // You can call createTable or other functions using the same data
      createTable(data);
    })
    .catch(error => {