CSV a JSON

JavaScriptJavaScriptBeginner

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

💡 Este tutorial está traducido por IA desde la versión en inglés. Para ver la versión original, puedes hacer clic aquí

Introducción

En este laboratorio, exploraremos cómo convertir una cadena de valores separados por comas (CSV) en una matriz bidimensional de objetos utilizando JavaScript. Utilizaremos varios métodos de manipulación de cadenas, como split() y slice(), junto con métodos de matriz como reduce() y map() para lograr esta conversión. Este laboratorio te ayudará a entender cómo trabajar con datos CSV en JavaScript y cómo manipularlos en un formato que se pueda procesar fácilmente.


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 a JSON"}} javascript/data_types -.-> lab-28230{{"CSV a JSON"}} javascript/arith_ops -.-> lab-28230{{"CSV a JSON"}} javascript/comp_ops -.-> lab-28230{{"CSV a JSON"}} javascript/array_methods -.-> lab-28230{{"CSV a JSON"}} javascript/higher_funcs -.-> lab-28230{{"CSV a JSON"}} end

CSV a JSON

Para convertir una cadena de valores separados por comas (CSV) en una matriz bidimensional de objetos y usarlo para practicar la codificación, abre la Terminal/SSH y escribe node. La primera fila de la cadena se utiliza como fila de títulos. Estos son los pasos para convertir CSV a JSON:

  1. Utiliza Array.prototype.indexOf() para encontrar el primer carácter de nueva línea (\n).
  2. Utiliza Array.prototype.slice() para eliminar la primera fila (fila de títulos) y String.prototype.split() para separarla en valores, utilizando el delimitador proporcionado.
  3. Utiliza String.prototype.split() para crear una cadena para cada fila.
  4. Utiliza String.prototype.split() para separar los valores en cada fila, utilizando el delimitador proporcionado.
  5. Utiliza Array.prototype.reduce() para crear un objeto para los valores de cada fila, con las claves analizadas a partir de la fila de títulos.
  6. Omite el segundo argumento, delimitador, para utilizar un delimitador predeterminado de ,.

Aquí está el código:

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),
        {}
      );
    });
};

Para probar la función, utiliza los siguientes ejemplos:

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

Resumen

¡Felicitaciones! Has completado el laboratorio de CSV a JSON. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.