Питання Як прочитати дані з файлу * .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   : value4_1, heading5: value5_1], [heading1: value1_2,   заголовок2: значення_2_2, заголовок3: значення3_2, заголовок4: значення4_2, заголовок5   : value5_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>

147
2017-09-15 13:00


походження


Без переривань рядків у вашому CSV-файлі коду JavaScript не зможе дізнатися, де один масив (або об'єкт) зупиняється, а інший починається (якщо ви не заздалегідь знаєте, що завжди є точно п'ять заголовків). Чи був цей контроль над вирішенням проблеми? - Blazemonger
Так, я заздалегідь знаю, що існує рівно п'ять полів. - Mahesh Thumar
Наступне запитання: чи дозволено jQuery у вирішенні? Ви використали тег, але ваш зразок коду - чистий JavaScript. - Blazemonger
Так, jQuery дозволено, тому я додаю його до тегу. - Mahesh Thumar
Я не думаю використання file://... допускається XMLHttpRequest. - dashmug


Відповіді:


ПРИМІТКА: Я придумав це рішення, перш ніж мені нагадували про всі "особливі випадки", які можуть виникнути в дійсному файлі CSV, наприклад, уникнути котирувань. Я залишаю свою відповідь тим, хто хоче щось швидко і брудно, але я рекомендую Відповідь Евана для точності


Цей код буде працювати, коли ваш 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/


91
2017-09-15 13:21



До речі, це передбачає, що файл CSV насправді має кілька рядків - ось що allText.split(/\r\n|\n/) розколюється Якщо всі ваші дані є насправді однією довгою рядком даних, розділених комами без нових рядків, це не дійсний файл CSV. - Blazemonger
Привіт Я використав цей код: але вихід не існує. Відображається лише порожній сповіщення. мій файл виглядає як: 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 Обидва csv.html і data.txt знаходяться в тій же папці - Mahesh Thumar
Якщо це не правильний файл (або дані), то як виглядає мій файл ?? - Mahesh Thumar
Код може не обробляти всі дійсні стандартні файли CSV стандарту IETF, і вони можуть вийти з ладу, якщо є рядки з вставленими комами, розривами рядків або подвійними лапками. Наприклад, 1, "IETF allows ""quotes"", commas and \nline breaks" який допускається, оскільки рядок оточений подвійними лапками, а подвійні лапки виключаються. - prototype
Я намагався прочитати файл .csv з mac. Я міг тільки отримати цей скрипт, щоб розпізнати нові символи, коли я змінив перший розділ на це var allTextLines = allText.split("\r");  Після цього він працював чудово! Дякую! - Joe


Не потрібно писати свій ...

The 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.

Оновлення:

Відредаговано використовувати набір даних, який надається операціям, та включає посилання на демо, де дані можуть бути перевірені на дійсність.

Update2:

Через формування коду Google. jquery-csv перейшов до GitHub


175
2017-09-05 20:32



IOW, "toObject" є або може розглядатися як "toJSON", ні? І, чи є двокрапка, яка слідує за викликом до "OBjects" (csv) помилкою? IOW, чи не повинно бути точка з комою? - B. Clay Shannon
Чи є CSV ім'я файлу? - bubble
Фантастична бібліотека. FYI, параметр csv Пройдена це рядок csv - прочитайте файл csv як текст, щоб отримати csv-рядок. - callmekatootie
@ Еванська косатка Як використовувати цю бібліотеку для читання з файлу CSV? - Richa Sinha
@RichaSinha Прочитайте файл як текстовий буфер за допомогою API файлів HTML5 або AJAX. Потім передайте рядок буфера в синтаксичний аналізатор. Внаслідок цього випаде масив даних. Див. Сторінку проекту на приклади. - Evan Plaice


Не розбивайте на коми - це не буде працювати для більшості файлів CSV, і це питання має занадто багато поглядів на різновид вхідних даних запитувача, які можна застосувати до кожного. Розбір CSV виглядає страшно, оскільки немає справді офіційного стандарту, і багато обмежених текстових письменників не вважають краєвими випадками.

Це питання старе, але я вважаю, що сьогодні є краще рішення Розбір папи доступний. Це бібліотека, яку я написав з допомогою співдокладників, яка аналізує текст або файли CSV. Це єдиний бібліотека JS, я знаю, що підтримує файли розміром гігабайт. Він також витончено обробляє помилковий вхід.

1 Гб файл розібрано за 1 хвилину: Parsed 1 GB file in 1 minute

(Оновлення: У програмі 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 може використовувати веб-працівників, щоб захистити ваш сайт від реактивності.

Папа може автоматично виявляти розділювачі та збігати значення зі стовпцями заголовків, якщо присутній рядок заголовка. Це також може перетворити числові значення в фактичні типи чисел. Він належним чином аналізує розриви рядків, цитати та інші дивні ситуації, і навіть обробляє помилковий вхід якнайважче. Я надихнув існуючі бібліотеки, щоб зробити папу, таким чином, реквізиту для інших реалізацій JS.


55
2018-01-15 00:24



+1 для Papa Parse. - ProfK
Папа проста у використанні і швидка! Дякую! - Technotronic
@EvanPlaice Спасибо. Вам може сподобатися ця презентація, яку я дав минулої ночі на місцевій зустрічі: docs.google.com/presentation/d/... - Matt
@ Метт Це була дивовижна презентація, яка описує про папу розбору в більш розумному шляху - siva
@ Malky.Kid Це неправильний CSV (тобто пробіли в нерозмежому значенні не є правильними). Встановлення формату CSV у форматі MS Excel виконується. Якщо ви все ще маєте доступ до вихідного файлу, повинна бути можливість включити роздільники цитат. Після цього ваші дані повинні працювати з будь-яким аналізатором csv. - Evan Plaice


Ось функція JavaScript, яка аналізує дані 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));

Ось як ви можете перетворити дані в об'єкти, як-от Ds csv parser (що є твердим рішенням третьої сторони):

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

Ось а робоча скрипка цього коду.

Насолоджуйтесь! -Курран


3
2018-04-03 23:23





я використовую 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);
})

Будь ласка, дивіться документи для більш.


3
2017-12-25 14:22





Ось ще один спосіб читати зовнішній файл 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]);
    }
})

Сподіваюся, це допоможе комусь у майбутньому!


1
2017-08-13 12:35



Здрастуйте з майбутнього, тому я спробував цю відповідь, і це не було ) знак в рядку 45, тому я додав його, але зараз на лінії 9 це дає мені помилку консолі Uncaught ReferenceError: $ is not defined at index.html:9Не могли б ви допомогти в цьому? - Lasagna Cat
Привіт @NavBowman, ви включили jQuery? - FredFury


За прийнята відповідь,

Я отримав це для роботи, змінивши 1 на 0 тут:

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

змінено на

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

Він обчислює файл з однією безперервною лінією, що має allTextLines.length 1. Таким чином, якщо цикл починається з 1 і працює до тих пір, поки воно менше 1, він ніколи не запускається. Отже, порожній сповіщення.


1
2017-07-12 07:06





Ви можете використовувати 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; }
        });

1
2018-05-07 17:06





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

Мені подобається регулярно виправляти якомога більше. Цей регулярний вираз обробляє всі позиції як цитованими, так і не котируваннями, після чого або розділювач стовпчиків, або розділювач рядків. Або кінець тексту.

Ось чому ця остання умова - без неї би не було нескінченного циклу, оскільки шаблон може відповідати нульовій довжині поля (цілком дійсний у csv). Але оскільки $ є твердженням нульової довжини, він не буде прогресувати до несумісності і закінчити цикл.

І FYI, мені довелося зробити другий варіант виключити цитати, що оточують цінність; схоже, що він виконував перед першою альтернативою на моєму движку javascript і розглядав котирування як частину нечіткої вартості. Я не буду питати - просто отримав його на роботу.


0
2017-09-18 20:17