Преобразование данных csv в формат массива

Я пытаюсь создать wordCloud с помощью jquery. У меня есть файл csv, который нужно прочитать и использовать эти данные для создания WordCloud. У меня есть столбцы в моем CSV-файле как

text weight
Lorem 15
Ipsum 9 

и так далее Но входные данные должны быть в следующем формате

var word_array = [
          {text: "Lorem", weight: 15},
          {text: "Ipsum", weight: 9},
          {text: "Dolor", weight: 6},
          {text: "Sit", weight: 7}
          ];

Как мне преобразовать мои CSV-данные в указанный выше формат, чтобы можно было сформировать облако слов. Если возможно, приложите код. Все это я делаю на своей html-странице. Спасибо.

как вы собираетесь читать CSV на своей HTML-странице?

Serving Quarantine period 02.04.2018 08:57
stackoverflow.com/help/how-to-ask
Serving Quarantine period 02.04.2018 09:01
stackoverflow.com/questions/23762822/…
zabusa 02.04.2018 09:02

используйте d3.js для wordcloud. Вам даже не нужен формат json, подойдет csv.

zawhtut 02.04.2018 09:22
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
8 404
4

Ответы 4

Вы можете получить данные из CSV в массив, используя приведенный ниже код

 /**
 * Convert data in CSV (comma separated value) format to a javascript array.
 *
 * Values are separated by a comma, or by a custom one character delimeter.
 * Rows are separated by a new-line character.
 *
 * Leading and trailing spaces and tabs are ignored.
 * Values may optionally be enclosed by double quotes.
 * Values containing a special character (comma's, double-quotes, or new-lines)
 *   must be enclosed by double-quotes.
 * Embedded double-quotes must be represented by a pair of consecutive 
 * double-quotes.
 *
 * Example usage:
 *   var csv = '"x", "y", "z"\n12.3, 2.3, 8.7\n4.5, 1.2, -5.6\n';
 *   var array = csv2array(csv);
 *  
 * Author: Jos de Jong, 2010
 * 
 * @param {string} data      The data in CSV format.
 * @param {string} delimeter [optional] a custom delimeter. Comma ',' by default
 *                           The Delimeter must be a single character.
 * @return {Array} array     A two dimensional array containing the data
 * @throw {String} error     The method throws an error when there is an
 *                           error in the provided data.
 */ 
function csv2array(data, delimeter) {
  // Retrieve the delimeter
  if (delimeter == undefined) 
    delimeter = ',';
  if (delimeter && delimeter.length > 1)
    delimeter = ',';

  // initialize variables
  var newline = '\n';
  var eof = '';
  var i = 0;
  var c = data.charAt(i);
  var row = 0;
  var col = 0;
  var array = new Array();

  while (c != eof) {
    // skip whitespaces
    while (c == ' ' || c == '\t' || c == '\r') {
      c = data.charAt(++i); // read next char
    }

    // get value
    var value = "";
    if (c == '\"') {
      // value enclosed by double-quotes
      c = data.charAt(++i);

      do {
        if (c != '\"') {
          // read a regular character and go to the next character
          value += c;
          c = data.charAt(++i);
        }

        if (c == '\"') {
          // check for escaped double-quote
          var cnext = data.charAt(i+1);
          if (cnext == '\"') {
            // this is an escaped double-quote. 
            // Add a double-quote to the value, and move two characters ahead.
            value += '\"';
            i += 2;
            c = data.charAt(i);
          }
        }
      }
      while (c != eof && c != '\"');

      if (c == eof) {
        throw "Unexpected end of data, double-quote expected";
      }

      c = data.charAt(++i);
    }
    else {
      // value without quotes
      while (c != eof && c != delimeter && c!= newline && c != ' ' && c != '\t' && c != '\r') {
        value += c;
        c = data.charAt(++i);
      }
    }

    // add the value to the array
    if (array.length <= row) 
      array.push(new Array());
    array[row].push(value);

    // skip whitespaces
    while (c == ' ' || c == '\t' || c == '\r') {
      c = data.charAt(++i);
    }

    // go to the next row or column
    if (c == delimeter) {
      // to the next column
      col++;
    }
    else if (c == newline) {
      // to the next row
      col = 0;
      row++;
    }
    else if (c != eof) {
      // unexpected character
      throw "Delimiter expected after character " + i;
    }

    // go to the next character
    c = data.charAt(++i);
  }  

  return array;
}

Ссылка на рабочий пример демонстрации: http://www.speqmath.com/tutorials/csv2array/

Этот код не работает. Выдает ошибку при "одиночном" и \ t

andreykyz 19.02.2021 11:58

Вот возможное решение  :

var csv = "";
csv += "text weight\n";
csv += "Lorem 15\n";
csv += "Ipsum 9";

var lines = csv.split("\n");
var titles = lines[0].split(" ");
var data = new Array(lines.length - 1);

for (var i = 1; i < lines.length; i++) {
  data[i - 1] = {};
  lines[i] = lines[i].split(" ");
  for (var j = 0; j < titles.length; j++) {
    data[i - 1][titles[j]] = lines[i][j];
  }
}

console.info(data);

Вот код, который я написал для этого:

const lineRegex = /((\\\n)|[^\n])+/g;
const datumRegex = /,?(("(\\"|.)+?")|([^",][^,]*))?/g;
const array2d: string[][] = rawCsvFile.match(lineRegex).map((row) => 
    row.match(datumRegex).map((datum) => datum.replace(/^,?"?|"$/g, "").trim()),
);

Приведенные выше регулярные выражения будут обрабатывать символы новой строки внутри данных, а также экранированные кавычки и запятые в кавычках. И если вы хотите создать массив объектов, где каждая строка является объектом со значениями первых строк в качестве имен опор, вы можете использовать это.

console.info(array2d); // [[name, age], ["joe", 35], ["martha", 28]]
const out = [];
const propsRow = array2d[0];
array2d.forEach((row, i) => {
    if (i === 0) { return; }
    const addMe: any = {};
    row.forEach((datum, j) => addMe[propsRow[j]] = datum);
    out.push(addMe);
});
console.info(out); // [{name: "joe", age: 35}, {name: "martha", age: 28}]

Вот возможное решение в ES6:

const csv2json = (str, delimiter = ',') => {
  const titles = str.slice(0, str.indexOf('\n')).split(delimiter);
  const rows = str.slice(str.indexOf('\n') + 1).split('\n');
  return rows.map(row => {
    const values = row.split(delimiter);
    return titles.reduce((object, curr, i) => (object[curr] = values[i], object), {})
  });
};


let csv = "text weight\nLorem 15\nIpsum 9";
let word_array = csv2json(csv,' ');
console.info(word_array)

Действительно хороший ответ! вы также можете обрезать ключи и значения, если есть начальные / конечные пробелы, в плохо отформатированных файлах .csv и т. д., изменив свой возврат внутри обратного вызова reduce на (object[curr.trim()] = values[i].trim(), object)

Alex L 07.05.2020 23:48

Да, вы правы, спасибо за ваше предложение, это действительно хорошее решение для нестандартных данных @AlexL

Raos 09.05.2020 03:11

Другие вопросы по теме