Javascript에서 CSV 파일을 어레이에 로드합니다.

Javascript에서 CSV 파일을 어레이에 로드합니다.

저는 워드프레스 웹페이지를 개발하고 있습니다.웹 페이지에는 모든 카운티가 포함된 콤보 상자가 있어야 합니다.이 모든 카운티에 대해 약 10,000개의 행이 있는 csv 형식의 데이터 세트가 있습니다.사용자가 드롭다운에서 카운티를 선택하면 선택한 카운티 데이터만 웹 페이지에 표시되도록 합니다.이게 제 요구 사항입니다.

wordpress에서 내 웹 페이지 js 파일을 추가하고 있습니다.

<script type="text/javascript" src="http://xxx/wp     content/uploads/2014/05/countyList1.js"></script>

그리고 웹 페이지 드롭다운 코드는

<select name="county" id="county" onload="setCounties();" onchange="getSelectedCountyData();"></select>

countryList1.js 파일에는 setCounties() 및 getSelectedCountyData() 함수가 있습니다.

지금까지는 카운티가 있는 드롭다운 목록을 볼 수 있습니다.CSV 파일을 읽고 선택한 카운티 필터를 이 목록에 적용하는 방법을 모릅니다.

FileReader 객체를 사용해 봤는데 웹 페이지에서 CSV 콘텐츠를 로드할 수 있지만 사용자가 CSV를 선택하지 않았으면 합니다.데이터 세트는 이미 가지고 있습니다.

이 SO 포스트에서 이 jquery.csv-0.71 라이브러리를 사용하려고 합니다.* 에서 데이터를 읽는 방법.javascript를 사용한 CSV 파일?도움이 필요해요

카운티가 선택되면 호출되는 코드입니다.

function getSelectedCountyData() {
        cntrySel = document.getElementById('county');
        //selCty = countyList[cntrySel.value];
        handleFiles();
}

function handleFiles() {

    $(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "D:\Docs\Desktop\csvfile.csv",
            dataType: "csv",
            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);
        }
    }
    console.log(lines);
    drawOutput(lines);
}

function drawOutput(lines) {
    //Clear previous data
    document.getElementById("output").innerHTML = "";
    var table = document.createElement("table");
    for (var i = 0; i < lines.length; i++) {
        var row = table.insertRow(-1);
        for (var j = 0; j < lines[i].length; j++) {
            var firstNameCell = row.insertCell(-1);
            firstNameCell.appendChild(document.createTextNode(lines[i][j]));
        }
    }
    document.getElementById("output").appendChild(table);
}

이 플러그인에 대해 알아볼 것을 강력히 권장합니다.

http://github.com/evanplaice/jquery-csv/

큰 CSV 파일을 처리하는 프로젝트에서 사용했는데 CSV를 어레이로 해석하는 작업이 매우 잘 처리됩니다.이를 사용하여 코드로 지정한 로컬파일을 호출할 수도 있기 때문에 파일 업로드에 의존하지 않아도 됩니다.

위의 플러그인을 포함하면 기본적으로 다음을 사용하여 CSV를 해석할 수 있습니다.

$.ajax({
    url: "pathto/filename.csv",
    async: false,
    success: function (csvd) {
        data = $.csv.toArrays(csvd);
    },
    dataType: "text",
    complete: function () {
        // call a function on complete 
    }
});

그러면 모든 것이 어레이 데이터에 저장되므로 필요에 따라 조작할 수 있습니다.필요하시면 어레이 데이터 처리에 대한 추가 예를 제시하겠습니다.

플러그인 페이지에는 다양한 작업을 수행할 수 있는 훌륭한 예가 많이 있습니다.

AJAX를 사용하여 사용자 시스템에서 파일을 가져올 수 없습니다.이건 완전히 잘못된 방법이야.

FileReader API를 사용합니다.

<input type="file" id="file input">

js:

console.log(document.getElementById("file input").files); // list of File objects

var file = document.getElementById("file input").files[0];
var reader = new FileReader();
content = reader.readAsText(file);
console.log(content);

그 후 해석contentCSV로 합니다.파서는 현재 다음과 같은 CSV 내의 이스케이프 값을 처리하지 않습니다.value1,value2,"value 3","value ""4"""

파일 크기를 크게 걱정하지 않으면 데이터를 다른 파일에 JS 개체로 저장하고 로 Import하는 것이 더 쉬울 수 있습니다.동기와 비동기 중 하나를 사용하여 구문을 사용합니다.<script src="countries.js" async></script>. 수입하다

단, 왜 10000엔트리를 다시 쓰고 싶지 않은지 알 수 있습니다.그러면 제가 쓴 기본적인 오브젝트 지향 csv 파서는 다음과 같습니다.

function requestCSV(f,c){return new CSVAJAX(f,c);};
function CSVAJAX(filepath,callback)
{
    this.request = new XMLHttpRequest();
    this.request.timeout = 10000;
    this.request.open("GET", filepath, true);
    this.request.parent = this;
    this.callback = callback;
    this.request.onload = function() 
    {
        var d = this.response.split('\n'); /*1st separator*/
        var i = d.length;
        while(i--)
        {
            if(d[i] !== "")
                d[i] = d[i].split(','); /*2nd separator*/
            else
                d.splice(i,1);
        }
        this.parent.response = d;
        if(typeof this.parent.callback !== "undefined")
            this.parent.callback(d);
    };
    this.request.send();
};

이렇게 사용할 수 있습니다.

var foo = requestCSV("csvfile.csv",drawlines(lines)); 

첫 번째 파라미터는 파일입니다.이 경우 html 파일의 위치를 기준으로 합니다.두 번째 파라미터는 파일이 완전히 로드되었을 때 가 실행하는 옵션 콜백 함수입니다.

파일에 구분되지 않는 콤마가 있는 경우 반환과 쉼표로 잘라내서 2D 어레이를 생성하기만 하면 되기 때문에 이 작업은 진행되지 않습니다.이 기능이 필요한 경우 regexp를 검토하는 것이 좋습니다.

//THIS works 

"1234","ABCD" \n
"!@£$" \n

//Gives you 
[
 [
  1234,
  'ABCD'
 ],
 [
  '!@£$'
 ]
]

//This DOESN'T!

"12,34","AB,CD" \n
"!@,£$" \n

//Gives you

[
 [
  '"12',
  '34"',
  '"AB',
  'CD'
 ]
 [
  '"!@',
  '£$'
 ]
]

OO 메서드에 익숙하지 않은 경우, 이들은 '컨스트럭터' 함수를 통해 자체 로컬 함수 및 변수를 사용하여 새로운 객체(숫자, 문자열, 배열 등)를 만듭니다.특정 상황에서 매우 편리합니다.이 함수는 콜백이 다른 10개의 다른 파일을 동시에 로드하기 위해 사용할 수 있습니다(csv love 수준에 따라 다름).

이것은 csv 파일을 어레이에 사용할 때 사용한 것입니다.위의 답변을 얻을 수 없었지만, 이것은 나에게 효과가 있었다.

$(document).ready(function() {
   "use strict";
    $.ajax({
        type: "GET",
        url: "../files/icd10List.csv",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

function processData(icd10Codes) {
    "use strict";
    var input = $.csv.toArrays(icd10Codes);
    $("#test").append(input);
}

위에 링크된 jQuery-CSV 플러그인을 사용.

CSV 파일 데이터를 읽고 분리하는 데 원래 코드가 올바르게 작동하지만 데이터 유형을 csv에서 텍스트로 변경해야 합니다.

언급URL : https://stackoverflow.com/questions/23762822/javascript-loading-csv-file-into-an-array