JavaScript에서 csv 파일을로드하고 표시

CSV 파일 준비

color.csv라는 색의 정보가 쓰여진 csv 파일을 준비했습니다.
덧붙여서 이번은 css로 사용할 수 있는 컬러 네임 일람표를 만들어 보았습니다. (전부 쓰면 길기 때문에 생략)

color.csv

種類,カラーネーム,カラーコード
赤,indianred,#cd5c5c
,lightcoral,#f08080
,salmon,#fa8072
,darksalmon,#e9967a
,lightsalmon,#ffa07a

Excel에서 다음과 같은 느낌으로 만들고 CSV로 내보냈습니다.

CSV 호출

csv 데이터를 읽는 데 HTTP 통신이 필요하므로 XMLHttpRequest()을 사용하십시오.

html

<div id="color_list"></div>

javascript

const output_svg = document.getElementById('color_list');

function csv_data(dataPath) {
	const request = new XMLHttpRequest(); // HTTPでファイルを読み込む
	request.addEventListener('load', (event) => { // ロードさせ実行
		const response = event.target.responseText; // 受け取ったテキストを返す
		output_svg.innerHTML = response; // 表示
	});
	request.open('GET', dataPath, true); // csvのパスを指定
	request.send();
}
csv_data('color.csv'); // csvのパス

HTTP 통신으로 표시하고 있기 때문에 로컬 환경을 만들거나 서버에 올려 확인.
브라우저에서는 이런 식으로 표시됩니다.

문자열에서 배열로 변환

데이터 처리를 위해 문자열에서 배열로 변환합니다.
개행(\n) 나누어, 각각 배열로 해 갑니다.

javascript

const output_csv = document.getElementById('color_list');

function csv_data(dataPath) {
	const request = new XMLHttpRequest(); // HTTPでファイルを読み込む
	request.addEventListener('load', (event) => { // ロードさせ実行
		const response = event.target.responseText; // 受け取ったテキストを返す
		csv_array(response); //csv_arrayの関数を実行
	});
	request.open('GET', dataPath, true); // csvのパスを指定
	request.send();
}

function csv_array(data) {
	const dataArray = []; //配列を用意
	const dataString = data.split('\n'); //改行で分割
	for (let i = 0; i < dataString.length; i++) { //あるだけループ
		dataArray[i] = dataString[i].split(',');
	}
	output_csv.innerHTML = dataArray; //表示
	console.log(dataArray);

}
csv_data('color.csv');

브라우저에서 확인하면 외형은 변하지 않지만 콘솔 화면에서는 배열로되어있는 것을 확인할 수 있습니다.

테이블 태그로 HTML로 출력

forEach()을 사용하여 배열의 모든 내용을 표시합니다.
이번에는 table 태그를 사용하고 싶기 때문에, tr과 td로 둘러싸고 표시시킨다.

html

<table id="color_list"></table>

css

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  font-size: 12px;
  padding: .2em .5em;
  border: solid 1px #ccc;
}

javascript

const output_csv = document.getElementById('color_list');

function csv_data(dataPath) {
	const request = new XMLHttpRequest(); // HTTPでファイルを読み込む
	request.addEventListener('load', (event) => { // ロードさせ実行
		const response = event.target.responseText; // 受け取ったテキストを返す
		csv_array(response); //csv_arrayの関数を実行
	});
	request.open('GET', dataPath, true); // csvのパスを指定
	request.send();
}

function csv_array(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>';
	});
	output_csv.innerHTML = insertElement; // 表示
}
csv_data('color.csv'); // csvのパス

브라우저에서 확인하면 표 형식으로 표시됩니다.

요약

csv는 json과 달리 한 번 필요하지만 엑셀 등으로 관리하기 쉽기 때문에 여러 장점이 있다고 생각했습니다.
손님으로부터의 엑셀 데이터를 "단지 표시시키고 싶다"적인 것이 자주 있었기 때문에, 만들 수 있어 기쁘다!