実験_サンプル
サーバーからの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>