วิธีอ่านข้อมูลจากไฟล์ * .CSV โดยใช้ javascript

ข้อมูล 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 ....

คุณอ่านข้อมูลนี้และแปลงเป็นอาร์เรย์อย่างนี้ได้อย่างไรโดยใช้ Javascript:

[ส่วนหัว 1: ค่า 1_1, ส่วนหัว 2: ค่า 2_1, ส่วนหัว 3: ค่า 3_1, ส่วนหัว 4: ค่า 4_1, ส่วนหัว 5: ค่า 5_1], [ส่วนหัว 1: ค่า 1_2, ส่วนหัว 2: ค่า 2_2, ส่วนหัว 3: ค่า 3_2, ส่วนหัว 4: ค่า 4_2]

ฉันได้ลองใช้รหัสนี้แล้ว แต่ไม่มีโชค!:

<script type="text/javascript">
    var allText =[];
    var allTextLines = [];
    var Lines = [];

    var txtFile = new XMLHttpRequest();
    txtFile.open("GET", "file://d:/data.txt", true);
    txtFile.onreadystatechange = function()
    {
        allText = txtFile.responseText;
        allTextLines = allText.split(/\r\n|\n/);
    };

    document.write(allTextLines);<br>
    document.write(allText);<br>
    document.write(txtFile);<br>
</script>

หมายเหตุ:ฉันได้เตรียมวิธีการแก้ปัญหานี้ก่อนที่ฉันจะเตือนเกี่ยวกับ "กรณีพิเศษ" ทั้งหมดที่สามารถเกิดขึ้นในไฟล์ CSV ที่ถูกต้องเช่นคำพูดที่หลบหนี ฉันออกจากคำตอบของฉันสำหรับผู้ที่ต้องการบางสิ่งที่รวดเร็วและสกปรก แต่ฉันขอแนะนำคำตอบของ Evanเพื่อความแม่นยำ

รหัสนี้จะใช้งานได้เมื่อdata.txtไฟล์ของคุณเป็นหนึ่งรายการที่คั่นด้วยจุลภาคโดยไม่ต้องขึ้นบรรทัดใหม่:

data.txt:

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

javascript:

$(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);
}

รหัสต่อไปนี้จะทำงานกับไฟล์ 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

javascript:

$(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/

ไม่จำเป็นต้องเขียนของคุณเอง ...

jQuery-CSVห้องสมุดมีฟังก์ชั่นที่เรียกว่า$.csv.toObjects(csv)ที่ไม่ทำแผนที่โดยอัตโนมัติ

หมายเหตุ: ไลบรารีได้รับการออกแบบมาเพื่อจัดการกับข้อมูล CSV ใด ๆ ที่เป็นไปตามมาตรฐานRFC 4180รวมถึงกรณีขอบที่น่ารังเกียจทั้งหมดที่โซลูชัน 'ธรรมดา' ส่วนใหญ่มองข้าม

เช่นเดียวกับ @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):

ผลลัพธ์ที่บันทึกไว้ใน 'data' จะเป็น:

[
  { 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" }
]

หมายเหตุ: ในทางเทคนิคแล้ววิธีที่คุณเขียนการจับคู่คีย์ - ค่าคือ JavaScript ที่ไม่ถูกต้อง วัตถุที่มีคู่คีย์ - ค่าควรห่อในวงเล็บ

หากคุณต้องการลองด้วยตัวคุณเองฉันขอแนะนำให้คุณดูการสาธิตการใช้งานขั้นพื้นฐานภายใต้แท็บ 'toObjects ()'

ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้เขียนดั้งเดิมของ jQuery-CSV

ปรับปรุง:

แก้ไขเพื่อใช้ชุดข้อมูลที่ op จัดเตรียมไว้และรวมลิงก์ไปยังตัวอย่างที่สามารถทดสอบข้อมูลเพื่อความถูกต้อง

Update2:

เนื่องจากชัตเตอร์ของ Google Code jquery-csv ได้ย้ายไปที่ GitHub

อย่าแยกด้วยเครื่องหมายจุลภาค - ใช้ไม่ได้กับไฟล์ CSV ส่วนใหญ่และคำถามนี้มีมุมมองที่มากเกินไปสำหรับการป้อนข้อมูลประเภทถามของผู้ถามเพื่อนำไปใช้กับทุกคน การแยกวิเคราะห์ CSV เป็นสิ่งที่น่ากลัวเนื่องจากไม่มีมาตรฐานอย่างเป็นทางการอย่างแท้จริงและผู้เขียนข้อความที่มีตัวคั่นจำนวนมากจะไม่พิจารณาตัวพิมพ์ขอบ

คำถามนี้เก่า แต่ฉันเชื่อว่ามีวิธีแก้ปัญหาที่ดีกว่าตอนนี้ที่Papa Parseพร้อมใช้งาน เป็นห้องสมุดที่ฉันเขียนด้วยความช่วยเหลือจากผู้มีส่วนร่วมแยกวิเคราะห์ข้อความหรือไฟล์ CSV มันเป็นไลบรารี JS เดียวที่ฉันรู้จักซึ่งรองรับขนาดไฟล์กิกะไบต์ นอกจากนี้ยังจัดการอินพุตที่ผิดรูปแบบได้อย่างสง่างาม

แจงไฟล์ 1 GB ใน 1 นาที:

( อัปเดต:ด้วย Papa Parse 4 ไฟล์เดียวกันใช้เวลาประมาณ 30 วินาทีใน Firefox ขณะนี้ Papa Parse 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!");
    }
});

หากหน้าเว็บของคุณล็อคระหว่างการแยกวิเคราะห์ Papa สามารถใช้ผู้ปฏิบัติงานเว็บเพื่อให้เว็บไซต์ของคุณมีปฏิกิริยา

Papa สามารถตรวจจับตัวคั่นโดยอัตโนมัติและจับคู่ค่ากับคอลัมน์ส่วนหัวหากมีแถวส่วนหัว นอกจากนี้ยังสามารถเปลี่ยนค่าตัวเลขให้เป็นชนิดตัวเลขจริงได้ แยกวิเคราะห์การแบ่งบรรทัดและคำพูดอย่างเหมาะสมและสถานการณ์แปลก ๆ อื่น ๆ อย่างเหมาะสมและยังจัดการอินพุตที่มีรูปแบบไม่ถูกต้องที่สุด ฉันได้รับแรงบันดาลใจจากห้องสมุดที่มีอยู่เพื่อสร้าง Papa ดังนั้นอุปกรณ์ประกอบการใช้งาน JS อื่น ๆ

ฉันใช้d3.jsสำหรับการแยกไฟล์ csv ใช้งานง่ายมาก นี่คือเอกสาร

ขั้นตอน:

• npm ติดตั้งคำร้องขอ d3

ใช้ Es6;

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

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

โปรดดูเอกสารเพิ่มเติม

อัปเดต - คำขอ d3 เลิกใช้แล้ว คุณสามารถใช้d3-fetch

คุณสามารถใช้ 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; }
        });

นี่คือฟังก์ชั่นจาวาสคริปต์ที่แยกวิเคราะห์ข้อมูล 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));

นี่คือวิธีที่คุณสามารถแปลงข้อมูลเป็นวัตถุเช่นตัวแยกวิเคราะห์ csv ของ D3 (ซึ่งเป็นวิธีแก้ปัญหาของบุคคลที่สามที่เป็นของแข็ง):

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));

นี่คือซอที่ใช้งานได้ของรหัสนี้

สนุก! - เคอร์แรน

นี่เป็นอีกวิธีในการอ่าน CSV ภายนอกใน Javascript (โดยใช้ jQuery)

มันยืดยาวไปหน่อย แต่ฉันรู้สึกโดยการอ่านข้อมูลลงในอาร์เรย์คุณสามารถทำตามขั้นตอนได้อย่างแม่นยำและทำการแก้ไขปัญหาได้ง่าย

อาจช่วยคนอื่นได้

ตัวอย่างไฟล์ข้อมูล:

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]);
    }
})

หวังว่านี่จะช่วยให้ใครบางคนในอนาคต!

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;
    }
}

ฉันต้องการให้ regex ทำมากที่สุด regex นี้ใช้กับไอเท็มทั้งหมดทั้งที่ยกมาหรือไม่ได้อ้างอิงตามด้วยตัวคั่นคอลัมน์หรือตัวคั่นแถว หรือท้ายข้อความ

ซึ่งเป็นสาเหตุที่เงื่อนไขสุดท้าย - ถ้าไม่มีก็จะเป็นลูปไม่สิ้นสุดเนื่องจากรูปแบบสามารถจับคู่กับฟิลด์ความยาวเป็นศูนย์ (ใช้ได้ทั้งหมดใน csv) แต่เนื่องจาก $ เป็นการยืนยันความยาวเป็นศูนย์จึงไม่ก้าวหน้าที่จะไม่ตรงกันและสิ้นสุดการวนซ้ำ

และ FYI ฉันต้องสร้างทางเลือกที่สองยกเว้นเครื่องหมายคำพูดโดยรอบค่า ดูเหมือนว่าจะดำเนินการก่อนทางเลือกแรกในเครื่องมือจาวาสคริปต์ของฉันและพิจารณาราคาที่เป็นส่วนหนึ่งของค่าที่ไม่ได้ยกมา ฉันจะไม่ถาม - ให้มันทำงาน

ต่อคำตอบที่ได้รับการยอมรับ ,

ฉันได้รับสิ่งนี้ในการทำงานโดยการเปลี่ยน 1 เป็น 0 ที่นี่:

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

เปลี่ยนไปเป็น

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

มันจะคำนวณไฟล์ที่มีหนึ่งบรรทัดต่อเนื่องเช่นเดียวกับการมี allTextLines.length 1 ดังนั้นหากลูปเริ่มต้นที่ 1 และทำงานตราบเท่าที่มันน้อยกว่า 1 มันจะไม่ทำงาน ดังนั้นช่องแจ้งเตือนที่ว่างเปล่า

หากคุณต้องการที่จะแก้ปัญหานี้โดยไม่ต้องใช้อาแจ็กซ์ใช้FileReader()เว็บ API

ตัวอย่างการนำไปใช้:

1. เลือก.csvไฟล์
2. ดูผลลัพธ์

function readSingleFile(e) {
  var file = e.target.files[0];
  if (!file) {
    return;
  }

  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
    displayParsed(contents);
  };
  reader.readAsText(file);
}

function displayContents(contents) {
  var element = document.getElementById('file-content');
  element.textContent = contents;
}

function displayParsed(contents) {
  const element = document.getElementById('file-parsed');
  const json = contents.split(',');
  element.textContent = JSON.stringify(json);
}

document.getElementById('file-input').addEventListener('change', readSingleFile, false);

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

<h3>Raw contents of the file:</h3>
<pre id="file-content">No data yet.</pre>

<h3>Parsed file contents:</h3>
<pre id="file-parsed">No data yet.</pre>

$(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]);

                        }
                      }
                    }

ที่จริงคุณสามารถใช้ห้องสมุดที่มีน้ำหนักเบาที่เรียกว่าใด ๆ ข้อความ

• ติดตั้งการพึ่งพา

npm i -D any-text

• ใช้คำสั่งที่กำหนดเองเพื่ออ่านไฟล์

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

หรือใช้ async-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');
  });
});