CSV読み込み

↓↓ スライドできます ↓↓↓

[metaslider id=”1939″]


CSVファイルから値を取得するためには、JavaScriptでファイルを読み込む必要があります。ウェブブラウザ環境では、File APIを使用してファイルを読み込むことができます。以下に、CSVファイルから値を取得するコード例を示します。

このコードは、CSVファイルを読み込んでその内容を表示する簡単な例です。

  • HTMLファイルでは、<input type="file">要素を使用してCSVファイルを選択するインターフェースを提供し、読み込むボタンと結果表示用の<div>要素を用意しています。
  • JavaScriptファイルでは、ファイルが選択されたときにFileReaderを使用してファイルを読み込み、行ごとに値を取得して表示します。

注意: このコードはブラウザ環境で動作します。Node.js環境ではファイルの読み込み方法が異なるため、別途処理が必要です。また、実際のアプリケーションではエラーハンドリングやセキュリティ対策などが考慮されるべきです。

CopyCode


    <!DOCTYPE html>

    <html>

    <head>

        <title>CSV File Reading Example</title>

    </head>
    
    <body>

        <input type="file" id="csvFileInput">

        <button id="loadButton">Load CSV</button>
    
        <div id="output"></div>
    
        <script src="script.js"></script>

    </body>
    
    </html>
        


 (今回は空ファイルです。)
        


    document.addEventListener("DOMContentLoaded", function() {

        var csvFileInput = document.getElementById("csvFileInput");

        var loadButton = document.getElementById("loadButton");

        var outputDiv = document.getElementById("output");
    
        loadButton.addEventListener("click", function() {
            var file = csvFileInput.files[0];
    
            if (file) {
                var reader = new FileReader();
    
                reader.onload = function(e) {

                    var contents = e.target.result;
                    var lines = contents.split("\n");
    
                    outputDiv.innerHTML = "";
    
                    for (var i = 0; i < lines.length; i++) {
                        var values = lines[i].split(",");
                        var row = document.createElement("div");
                        row.textContent = "Row " + (i + 1) + ": " + values.join(", ");
                        outputDiv.appendChild(row);
                        
                    }
                };
    
                reader.readAsText(file);
            }
        });
    });
        
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次