Как читать данные из файла * .CSV, используя JavaScript?

Question

Мои данные csv выглядят так:

заголовок1, заголовок2, заголовок3, заголовок4, заголовок5, значение1_1, значение2_1, значение3_1, значение4_1, значение 5_1, значение1_2, значение2_2, значение3_2, значение4_2, значение5_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, заголовок5: значение5_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>

Answer 1

Не нужно писать свой собственный ...

Библиотека 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 Code. jquery-csv переехал на GitHub

Answer 2

ПРИМЕЧАНИЕ: Я придумал это решение, прежде чем мне напомнили обо всех «особых случаях», которые могут возникнуть в действительном файле 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/

Answer 3

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

Этот вопрос старый, но я думаю, что теперь есть лучшее решение, когда Papa Parse доступен. Это библиотека, которую я написал с помощью авторов, которая анализирует CSV-текст или файлы. Это единственная из известных мне JS-библиотек, которая поддерживает файлы размером в гигабайты. Он также корректно обрабатывает некорректный ввод.

Файл размером 1 ГБ, проанализированный за 1 минуту:

( Обновление: При использовании Papa Parse 4 этот же файл занял в Firefox всего около 30 секунд. 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, поэтому перейдем к другим реализациям JS.

Answer 4

Я использую 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

Answer 5

Вот функция 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));

Вот как вы можете преобразовать данные в объекты, например, 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));

Вот рабочая скрипка этого кода .

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

Answer 6

Вы можете использовать PapaParse, чтобы помочь. https://www.papaparse.com/

Вот кодекс. 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; }
        });

Answer 7

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).Но так как $ является утверждением нулевой длины, оно не перейдет к несоответствию и не завершит цикл.

И, к вашему сведению, мне пришлось сделать второй вариант, исключив кавычки, окружающие значение;похоже, что он выполнялся до первой альтернативы на моем движке JavaScript и рассматривал кавычки как часть значения без кавычек.Я не буду просить - просто заставил это работать.

Answer 8

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

Надеюсь, это кому-нибудь поможетв будущем!

Answer 9

В соответствии с принятым ответом ,

Я получил это для работы, изменив 1 на 0 здесь:

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

изменено на

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

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