JavaScript에서 배열에 CSV 로드

1. jQuery-csv 플러그인을 사용하여 JavaScript의 배열에 CSV 로드
2. JavaScript의 배열에 CSV를 로드하는 사용자 정의 함수 만들기

CSV는 텍스트 파일입니다. 구분 기호로 쉼표를 사용하여 다른 값을 구분합니다.

이 기사에서는 JavaScript를 사용하여 CSV 파일을 배열에 로드합니다.

jQuery-csv 플러그인을 사용하여 JavaScript의 배열에 CSV 로드

jQuery 라이브러리는 CSV 파일을 배열로 읽을 수 있는 jquery-csv 플러그인을 제공합니다.

예를 들어,

array = $.csv.toArrays(csv, {
  delimiter: '\'',
  separator: ';',  // Sets a custom field separator character
});

delimiter 및 separator 속성을 사용하여 사용자 지정 구분 기호 문자와 구분 기호를 설정할 수 있습니다. 최종 결과는 배열에 저장됩니다.

JavaScript의 배열에 CSV를 로드하는 사용자 정의 함수 만들기

FileReader 클래스를 사용하여 필요한 CSV 파일을 문자열로 읽습니다. 이것을 배열에 저장하기 위해 slice(), split(), map() 함수를 사용할 것입니다. slice() 함수는 구현된 이전 배열의 일부가 포함된 새 배열을 반환하는 데 도움이 됩니다. map() 함수는 배열의 모든 요소에 제공되는 함수를 제공하여 새 배열을 반환하는 데 도움이 됩니다. split() 함수는 지정된 구분 기호를 사용하여 문자열을 배열 형태의 하위 문자열로 분할하는 데 도움이 됩니다.

아래 코드를 참조하십시오.

function csv_To_Array(str, delimiter = ',') {
  const header_cols = str.slice(0, str.indexOf('\n')).split(delimiter);
  const row_data = str.slice(str.indexOf('\n') + 1).split('\n');
  const arr = row_data.map(function(row) {
    const values = row.split(delimiter);
    const el = header_cols.reduce(function(object, header, index) {
      object[header] = values[index];
      return object;
    }, {});
    return el;
  });

  // return the array
  return arr;
}

파일의 첫 번째 줄에 헤더가 포함되어 있다고 가정합니다. slice() 함수는 처음부터 \n 인덱스까지 시작하고 split() 함수를 사용하여 구분 기호를 기반으로 문자열을 배열로 분할합니다. 마찬가지로 이 두 함수를 사용하여 행을 저장합니다. 다음으로 행을 배열에 매핑합니다. map() 함수를 사용하여 행의 각 값을 배열로 분할합니다. reduce() 함수는 헤더와 함께 사용되어 객체를 생성하고 필요한 헤더와 함께 행의 값을 추가하고 이 객체를 반환합니다. 이 개체는 배열에 추가됩니다. 마지막으로 객체의 배열인 최종 배열을 반환합니다.