実験_サンプル

サーバーからのCSVからのデータ取得(表)。

サーバーからのCSVからのデータ取得(データ)。

 <table id="output",style="width:50%"></table>

    <style>
        table {
            border-collapse: collapse; /*隣接する枠線を重ねて表示*/
            border-spacing: 0pt; /*枠線を間隔をなしに*/
            /* width: 100%; */
            text-align: left;
        }
        table th {
            background-color: #03f8ec;
            border: solid 1px #666666;
            /* padding: 10px;
            width: 25%; */
        }
        table td {
            border: solid 1px #666666;
            /* padding: 10px; */
            width: 10%;
        }
    </style>

    <script>
        const outputElement = document.getElementById('output');
        function getCsvData(dataPath) {
        const request = new XMLHttpRequest();
        request.addEventListener('load', (event) => {
        const response = event.target.responseText;
        //   outputElement.innerHTML = response;
        getCsvDataArray(response); //arrayの関数を実行
        });
        request.open('GET', dataPath, true);
        request.send();
        }

        function getCsvDataArray(data) {
            const dataArray = []; //配列を用意
            const dataString = data.split('\n'); //改行で分割
            for (let i = 0; i < dataString.length; i++) { //あるだけループ
                dataArray[i] = dataString[i].split(',');
            }
            let insertElement = ''; //テーブルタグに表示する用の変数
            dataArray.forEach((element) => { //配列の中身を表示
                insertElement += '<tr>';
                element.forEach((childElement) => {
                    insertElement += `<td>${childElement}</td>`
                });
                insertElement += '</tr>';
            });
            outputElement.innerHTML = insertElement; // 表示
        }

        getCsvData('********/data_out.csv');
    </script>

前の記事

実験_株価推移

次の記事

ヒストグラム。