복붙노트

[JQUERY] 어떻게 자바 스크립트를 사용하여 * .CSV 파일에서 데이터를 읽어?

JQUERY

어떻게 자바 스크립트를 사용하여 * .CSV 파일에서 데이터를 읽어?

해결법

  1. 1.참고 : 나는 탈출 따옴표처럼, 유효한 CSV 파일에서 발생할 수있는 모든 "특별한 경우"에 대해 생각 나게 전에 나는이 솔루션을 섞어서. 내가 뭔가를 신속하고 더러운를 원하는 사람들을 위해 내 대답을 떠날거야,하지만 난 정확성에 대한 에반의 답변을 권장합니다.

    참고 : 나는 탈출 따옴표처럼, 유효한 CSV 파일에서 발생할 수있는 모든 "특별한 경우"에 대해 생각 나게 전에 나는이 솔루션을 섞어서. 내가 뭔가를 신속하고 더러운를 원하는 사람들을 위해 내 대답을 떠날거야,하지만 난 정확성에 대한 에반의 답변을 권장합니다.

    당신의 data.txt라는 파일이 쉼표로 구분 된 항목 중 하나 긴 문자열 인 경우이 코드없이 줄 바꿈으로 작동합니다 :

    data.txt로 :

     heading1,heading2,heading3,heading4,heading5,value1_1,...,value5_2

    자바 스크립트 :

    $(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var record_num = 5;  // or however many elements there are in each row
    var allTextLines = allText.split(/\r\n|\n/);
    var entries = allTextLines[0].split(',');
    var lines = [];

    var headings = entries.splice(0,record_num);
    while (entries.length>0) {
        var tarr = [];
        for (var j=0; j<record_num; j++) {
            tarr.push(headings[j]+":"+entries.shift());
        }
        lines.push(tarr);
    }
    // alert(lines);
}

    다음 코드는 기록의 각 세트 사이에 줄 바꿈과 "true"로 CSV 파일에서 작동합니다 :

    data.txt로 :

    heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

    자바 스크립트 :

    $(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(headers[j]+":"+data[j]);
            }
            lines.push(tarr);
        }
    }
    // alert(lines);
}

    http://jsfiddle.net/mblase75/dcqxr/

  2. 2.필요가 직접 작성 없습니다 ...

    필요가 직접 작성 없습니다 ...

    JQuery와-CSV 라이브러리는 자동으로 매핑을 실시 $ .csv.toObjects (CSV)라는 기능이 있습니다.

    참고 :이 라이브러리는 가장 '간단한'솔루션은 간과 불쾌한 가장자리 모든 경우를 포함하여, RFC 4180 규격을 어떤 CSV 데이터를 처리 할 수 ​​있도록 설계되어있다.

    @Blazemonger 이미 언급 한 것처럼, 먼저 데이터 유효 CSV를 만들기 위해 줄 바꿈을 추가해야합니다.

    다음 데이터 세트를 사용 :

    heading1,heading2,heading3,heading4,heading5
value1_1,value2_1,value3_1,value4_1,value5_1
value1_2,value2_2,value3_2,value4_2,value5_2

    코드를 사용하여 :

    var data = $.csv.toObjects(csv):

    '데이터'에 저장된 출력 될 것입니다 :

    [
  { heading1:"value1_1",heading2:"value2_1",heading3:"value3_1",heading4:"value4_1",heading5:"value5_1" } 
  { heading1:"value1_2",heading2:"value2_2",heading3:"value3_2",heading4:"value4_2",heading5:"value5_2" }
]

    참고 : 기술적으로, 당신은 키와 값의 매핑이 자바 스크립트를 무효 쓴 방법. 키 - 값 쌍을 포함하는 개체는 괄호로 포장한다.

    당신이 자신을 위해 그것을 밖으로 시도하고 싶은 경우에, 나는 당신이 'toObjects ()'에서 기본 사용 데모를 살펴 탭을 보시기 바랍니다.

    면책 조항 : 나는 jQuery를-CSV의 원래 저자입니다.

    최신 정보:

    연산 제공하고 데이터 유효성을 테스트 할 수있는 데모에 대한 링크를 포함하는 데이터 집합을 사용하는 편집.

    갱신 2 :

    때문에 Google 코드의 셔터 링에. JQuery와-CSV는 GitHub의 이동했다

  3. 3.쉼표에 분리하지 마십시오 - 그것은 대부분의 CSV 파일에 대해 작동하지 않습니다,이 문제는 입력 데이터의 아스 커의 종류 wayyyy 너무 많은 뷰 모두에 적용한다. 거기에는 진정 공식 표준 없습니다, 및 구분 된 텍스트 작가의 많은 가장자리 케이스를 고려하지 않기 때문에 구문 분석 CSV 종류 무서운 것입니다.

    쉼표에 분리하지 마십시오 - 그것은 대부분의 CSV 파일에 대해 작동하지 않습니다,이 문제는 입력 데이터의 아스 커의 종류 wayyyy 너무 많은 뷰 모두에 적용한다. 거기에는 진정 공식 표준 없습니다, 및 구분 된 텍스트 작가의 많은 가장자리 케이스를 고려하지 않기 때문에 구문 분석 CSV 종류 무서운 것입니다.

    이 질문은 오래,하지만 난 더 나은 솔루션은 이제 파파 구문 분석을 사용할 수 있는지있다 생각합니다. 그것은 구문 분석은 텍스트 나 파일을 CSV 것을, 내가 참여자의 도움으로, 쓴 라이브러리입니다. 내가 크기가 지원하는 파일 기가 바이트의 알고있는 유일한 JS 라이브러리입니다. 또한 정상적으로 잘못된 입력을 처리합니다.

    1기가바이트 파일은 1 분 분석 :

    (업데이트 :와 파파 구문 분석 (4), 같은 파일은 파이어 폭스에서 약 30 초 걸렸다 파파 구문 분석 (4) 이제 브라우저의 빠른 알려진 CSV 파서입니다..)

    구문 분석 텍스트는 매우 간단합니다 :

    var data = Papa.parse(csvString);

    파일을 구문 분석하는 것은 간단합니다 :

    Papa.parse(file, {
    complete: function(results) {
        console.log(results);
    }
});

    파일을 스트리밍 (여기에 원격 파일 스트림 예이야)과 유사합니다 :

    Papa.parse("http://example.com/bigfoo.csv", {
    download: true,
    step: function(row) {
        console.log("Row:", row.data);
    },
    complete: function() {
        console.log("All done!");
    }
});

    웹 페이지 구문 분석 중에 잠그는 경우, 파파 귀하의 웹 사이트의 반응을 유지하기 위해 웹 근로자를 사용할 수 있습니다.

    파파 캔 구분 기호를 자동으로 감지하고 헤더 행이 존재하는 경우, 헤더 열이 값을 일치합니다. 또한 실제 숫자 유형으로 숫자 값을 설정할 수 있습니다. 그것은 적절하게 줄 바꿈 및 시세 및 다른 이상한 상황을 분석, 심지어는 가능한 한 견고 잘못된 입력을 처리합니다. 본인은 JS 구현에 소품 있도록, 파파을 기존 라이브러리에서 영감에 그려진했습니다.

  4. 4.나는 csv 파일을 구문 분석 d3.js를 사용하고 있습니다. 사용하기 매우 편리합니다. 여기에 문서입니다.

    나는 csv 파일을 구문 분석 d3.js를 사용하고 있습니다. 사용하기 매우 편리합니다. 여기에 문서입니다.

    단계 :

    ES6를 사용;

    import { csv } from 'd3-request';
import url from 'path/to/data.csv';

csv(url, function(err, data) {
 console.log(data);
})

    이상 문서를 참조하십시오.

    업데이트 - D3-요청이 지원되지 않습니다. 당신이 사용할 수있는 D3를 페치

  5. 5.여기 파싱의 CSV 데이터를 쉼표를 차지 내부 따옴표를 발견 자바 스크립트 함수입니다.

    여기 파싱의 CSV 데이터를 쉼표를 차지 내부 따옴표를 발견 자바 스크립트 함수입니다.

    // Parse a CSV row, accounting for commas inside quotes                   
function parse(row){
  var insideQuote = false,                                             
      entries = [],                                                    
      entry = [];
  row.split('').forEach(function (character) {                         
    if(character === '"') {
      insideQuote = !insideQuote;                                      
    } else {
      if(character == "," && !insideQuote) {                           
        entries.push(entry.join(''));                                  
        entry = [];                                                    
      } else {
        entry.push(character);                                         
      }                                                                
    }                                                                  
  });
  entries.push(entry.join(''));                                        
  return entries;                                                      
}

    함수의 사용 예제는 모습이 좋아하는 CSV 파일을 구문 분석합니다 :

    "foo, the column",bar
2,3
"4, the value",5

    배열에 :

    // csv could contain the content read from a csv file
var csv = '"foo, the column",bar\n2,3\n"4, the value",5',

    // Split the input into lines
    lines = csv.split('\n'),

    // Extract column names from the first line
    columnNamesLine = lines[0],
    columnNames = parse(columnNamesLine),

    // Extract data from subsequent lines
    dataLines = lines.slice(1),
    data = dataLines.map(parse);

// Prints ["foo, the column","bar"]
console.log(JSON.stringify(columnNames));

// Prints [["2","3"],["4, the value","5"]]
console.log(JSON.stringify(data));

    여기에 당신이 (고체 타사 솔루션) D3의 CSV 파서처럼 개체로 데이터를 변환하는 방법은 다음과 같습니다

    var dataObjects = data.map(function (arr) {
  var dataObject = {};
  columnNames.forEach(function(columnName, i){
    dataObject[columnName] = arr[i];
  });
  return dataObject;
});

// Prints [{"foo":"2","bar":"3"},{"foo":"4","bar":"5"}]
console.log(JSON.stringify(dataObjects));

    다음은이 코드의 작동 바이올린입니다.

    즐겨! --Curran

  6. 6.당신은 도움말을 PapaParse를 사용할 수 있습니다. https://www.papaparse.com/

    당신은 도움말을 PapaParse를 사용할 수 있습니다. https://www.papaparse.com/

    여기 CodePen이다. https://codepen.io/sandro-wiggers/pen/VxrxNJ

    Papa.parse(e, {
            header:true,
            before: function(file, inputElem){ console.log('Attempting to Parse...')},
            error: function(err, file, inputElem, reason){ console.log(err); },
            complete: function(results, file){ $.PAYLOAD = results; }
        });

  7. 7.여기에 (jQuery를 사용하여) 자바 스크립트로 외부 CSV를 읽을 수있는 또 다른 방법입니다.

    여기에 (jQuery를 사용하여) 자바 스크립트로 외부 CSV를 읽을 수있는 또 다른 방법입니다.

    그것은 조금 더 긴 호흡,하지만 난 당신이 정확하게 절차를 따를 수 배열로 데이터를 읽고 느끼고 쉽게 문제 해결을 위해 수 있습니다.

    다른 사람에게 도움이 될 수 있습니다.

    데이터 파일의 예 :

    Time,data1,data2,data2
08/11/2015 07:30:16,602,0.009,321

    그리고 여기에 코드입니다 :

    $(document).ready(function() {
 // AJAX in the data file
    $.ajax({
        type: "GET",
        url: "data.csv",
        dataType: "text",
        success: function(data) {processData(data);}
        });

    // Let's process the data from the data file
    function processData(data) {
        var lines = data.split(/\r\n|\n/);

        //Set up the data arrays
        var time = [];
        var data1 = [];
        var data2 = [];
        var data3 = [];

        var headings = lines[0].split(','); // Splice up the first row to get the headings

        for (var j=1; j<lines.length; j++) {
        var values = lines[j].split(','); // Split up the comma seperated values
           // We read the key,1st, 2nd and 3rd rows 
           time.push(values[0]); // Read in as string
           // Recommended to read in as float, since we'll be doing some operations on this later.
           data1.push(parseFloat(values[1])); 
           data2.push(parseFloat(values[2]));
           data3.push(parseFloat(values[3]));

        }

    // For display
    var x= 0;
    console.log(headings[0]+" : "+time[x]+headings[1]+" : "+data1[x]+headings[2]+" : "+data2[x]+headings[4]+" : "+data2[x]);
    }
})

    이 미래에 누군가가 도움이되기를 바랍니다!

  8. 8.

    function CSVParse(csvFile)
{
    this.rows = [];

    var fieldRegEx = new RegExp('(?:\s*"((?:""|[^"])*)"\s*|\s*((?:""|[^",\r\n])*(?:""|[^"\s,\r\n]))?\s*)(,|[\r\n]+|$)', "g");   
    var row = [];
    var currMatch = null;

    while (currMatch = fieldRegEx.exec(this.csvFile))
    {
        row.push([currMatch[1], currMatch[2]].join('')); // concatenate with potential nulls

        if (currMatch[3] != ',')
        {
            this.rows.push(row);
            row = [];
        }

        if (currMatch[3].length == 0)
            break;
    }
}

    나는 가능한 한 많은 일을 정규식을 좋아합니다. 이 정규식 취급 중 개행 문자, C 럼 분리, 또는 행 구분 기호 중 하나를 다음과 같이 모든 항목. 또는 텍스트의 끝.

    어떤 마지막 조건 이유 - 패턴이 제로 길이 필드 (CSV에서 완전히 유효)와 일치 할 수 있기 때문에 그것없이 그것을 무한 루프 될 것이다. $ 길이가 0 인 주장이기 때문에, 그것은 비 일치로 진행하고 루프를 종료하지 않습니다.

    그리고 참고로, 나는 두 번째 대안은 값을 주변 시세를 제외했습니다; 내 자바 스크립트 엔진의 첫 번째 대안 전에 실행하고 인용 부호로 둘러싸이지 않은 값의 일부로 따옴표를 고려하고있는 것처럼 보인다. 내가 요청하지 않습니다 - 단지 작업에있어.

  9. 9.허용 대답 당,

    허용 대답 당,

    나는 1 여기에 0으로 변경하여 작업이있어 ​​:

    for (var i=1; i<allTextLines.length; i++) {

    로 변경

    for (var i=0; i<allTextLines.length; i++) {

    그것은 오래 적은 1 이상입니다뿐만 루프 1에서 시작하고 실행, 그것은 실행되지 않을 경우 1. 지금의 allTextLines.length있는 것으로 하나 개의 연속 줄을 사용하여 파일을 계산합니다. 따라서 빈 경고 상자.

  10. 10.당신은 Ajax를 사용하지 않고이 문제를 해결하려면을 FileReader () 웹 API를 사용합니다.

    당신은 Ajax를 사용하지 않고이 문제를 해결하려면을 FileReader () 웹 API를 사용합니다.

    예 구현 :

    readSingleFile 함수 (E) { var 파일 e.target.files = [0]; 만약 (! 파일) { 반환; } VAR 리더는 새로운을 FileReader를 () =; reader.onload = 함수 (E) { VAR 내용 = e.target.result; displayContents (콘텐츠); displayParsed (콘텐츠); }; reader.readAsText (파일); } 함수 displayContents (컨텐츠) { VAR 요소 = document.getElementById를 ( '파일 내용'); element.textContent 내용량 =; } 함수 displayParsed (컨텐츠) { CONST 소자 = document.getElementById를 ( '파일을 파싱'); CONST JSON contents.split = ( ''); element.textContent = JSON.stringify JSON (); } document.getElementById를 ( '파일 입력') 또는 addEventListener ( '변화'readSingleFile, 거짓).;

    파일의 원시 내용 : <프리 ID = "콘텐츠 파일"> 어떤 데이터가 아직.

    분석 된 파일 내용 : <프리 ID = "파일을 파싱"> 데이터가 아직.

  11. 11.

    $(function() {

      $("#upload").bind("click", function() {
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.xlsx)$/;
            if (regex.test($("#fileUpload").val().toLowerCase())) {
              if (typeof(FileReader) != "undefined") {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var customers = new Array();
                    var rows = e.target.result.split("\r\n");
                    for (var i = 0; i < rows.length - 1; i++) {
                      var cells = rows[i].split(",");
                      if (cells[0] == "" || cells[0] == undefined) {
                        var s = customers[customers.length - 1];
                        s.Ord.push(cells[2]);
                      } else {
                        var dt = customers.find(x => x.Number === cells[0]);
                        if (dt == undefined) {
                          if (cells.length > 1) {
                            var customer = {};
                            customer.Number = cells[0];
                            customer.Name = cells[1];
                            customer.Ord = new Array();

                            customer.Ord.push(cells[2]);
                            customer.Point_ID = cells[3];
                            customer.Point_Name = cells[4];
                            customer.Point_Type = cells[5];
                            customer.Set_ORD = cells[6];
                            customers.push(customer);
                          }
                        } else {
                          var dtt = dt;
                          dtt.Ord.push(cells[2]);

                        }
                      }
                    }

  12. 12.사실 당신은 어떤 텍스트라는 경량 라이브러리를 사용할 수 있습니다.

    사실 당신은 어떤 텍스트라는 경량 라이브러리를 사용할 수 있습니다.

    npm i -D any-text

    var reader = require('any-text');
 
reader.getText(`path-to-file`).then(function (data) {
  console.log(data);
});

    또는 사용 비동기 await를 :

    var reader = require('any-text');
 
const chai = require('chai');
const expect = chai.expect;
 
describe('file reader checks', () => {
  it('check csv file content', async () => {
    expect(
      await reader.getText(`${process.cwd()}/test/files/dummy.csv`)
    ).to.contains('Lorem ipsum');
  });
});

  13. 13.A는 후반 비트하지만 난 누군가 도움이되기를 바랍니다.

    A는 후반 비트하지만 난 누군가 도움이되기를 바랍니다.

    얼마 전에 심지어는 문자열 데이터 사이에 그것은 다른 라인으로 읽는 데 사용되는 파일을 읽는 동안 N \ 포함 된 문제에 직면했다.

    예.

    "Harry\nPotter","21","Gryffindor"

    읽는 동안:

    Harry
Potter,21,Gryffindor

    나는이 문제를 해결하기 위해 내 각 프로젝트의 라이브러리 csvtojson을 사용했다.

    다음 코드를 사용하여 문자열로 CSV 파일을 읽고 다음 csvtojson 라이브러리에 해당 문자열을 전달하고 그것은 당신에게 JSON의 목록을 제공 할 수 있습니다.

    샘플 코드 :

    const csv = require('csvtojson');
if (files && files.length > 0) {
    const file: File = files.item(0);
    const reader: FileReader = new FileReader();
    reader.readAsText(file);
    reader.onload = (e) => {
    const csvs: string = reader.result as string;
    csv({
        output: "json",
        noheader: false
    }).fromString(csvs)
        .preFileLine((fileLine, idx) => {
        //Convert csv header row to lowercase before parse csv file to json
        if (idx === 0) { return fileLine.toLowerCase() }
        return fileLine;
        })
        .then((result) => {
        // list of json in result
        });
    }
}

    14. from https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 오늘 날짜에 일수를 추가하려면? [복제]  (0) 2020.09.25
[JQUERY] jQuery로 트리거 키 누르기 이벤트에 확실한 방법  (0) 2020.09.25
[JQUERY] 자바 스크립트를 사용하여 '터치 스크린'장치를 감지하는 가장 좋은 방법은 무엇입니까?  (0) 2020.09.25
[JQUERY] jQuery로 자바 스크립트 객체에서 선택하는 옵션을 추가하는 가장 좋은 방법은 무엇입니까?  (0) 2020.09.25
[JQUERY] 어떻게 jQuery를 사용하여 "잠시 기다려주십시오로드 중 ..."애니메이션을 만들 수 있습니까?  (0) 2020.09.25
,

티스토리툴바