CSV в JSON

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

В этом практическом занятии мы изучим, как преобразовать строку, разделенную запятыми (CSV), в двумерный массив объектов с использованием JavaScript. Мы будем использовать различные методы манипуляции строк, такие как split() и slice(), а также методы массивов, такие как reduce() и map(), чтобы выполнить это преобразование. Это практическое занятие поможет вам понять, как работать с данными CSV в JavaScript и как преобразовать их в формат, который можно легко обработать.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") subgraph Lab Skills javascript/variables -.-> lab-28230{{"CSV в JSON"}} javascript/data_types -.-> lab-28230{{"CSV в JSON"}} javascript/arith_ops -.-> lab-28230{{"CSV в JSON"}} javascript/comp_ops -.-> lab-28230{{"CSV в JSON"}} javascript/array_methods -.-> lab-28230{{"CSV в JSON"}} javascript/higher_funcs -.-> lab-28230{{"CSV в JSON"}} end

CSV в JSON

Для преобразования строки, разделенной запятыми (CSV), в двумерный массив объектов и использования этого для практики программирования откройте Терминал/SSH и введите node. Первая строка строки используется в качестве заголовочной строки. Вот шаги по преобразованию CSV в JSON:

  1. Используйте Array.prototype.indexOf(), чтобы найти первый символ новой строки (\n).
  2. Используйте Array.prototype.slice(), чтобы удалить первую строку (заголовочную строку), и String.prototype.split(), чтобы разделить ее на значения, используя заданный разделитель.
  3. Используйте String.prototype.split(), чтобы создать строку для каждой строки.
  4. Используйте String.prototype.split(), чтобы разделить значения в каждой строке, используя заданный разделитель.
  5. Используйте Array.prototype.reduce(), чтобы создать объект для значений каждой строки, с ключами, разобранными из заголовочной строки.
  6. Игнорируйте второй аргумент, разделитель, чтобы использовать по умолчанию разделитель ,.

Вот код:

const CSVToJSON = (data, delimiter = ",") => {
  const titles = data.slice(0, data.indexOf("\n")).split(delimiter);
  return data
    .slice(data.indexOf("\n") + 1)
    .split("\n")
    .map((v) => {
      const values = v.split(delimiter);
      return titles.reduce(
        (obj, title, index) => ((obj[title] = values[index]), obj),
        {}
      );
    });
};

Для тестирования функции используйте следующие примеры:

CSVToJSON("col1,col2\na,b\nc,d");
// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];
CSVToJSON("col1;col2\na;b\nc;d", ";");
// [{'col1': 'a', 'col2': 'b'}, {'col1': 'c', 'col2': 'd'}];

Резюме

Поздравляем! Вы завершили практическое занятие по преобразованию CSV в JSON. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.