CSV in JSON

JavaScriptJavaScriptBeginner
Jetzt üben

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

💡 Dieser Artikel wurde von AI-Assistenten übersetzt. Um die englische Version anzuzeigen, können Sie hier klicken

Einführung

In diesem Lab werden wir untersuchen, wie man eine durch Kommata getrennte Werte (CSV)-Zeichenfolge in ein zweidimensionales Array von Objekten mit JavaScript umwandeln kann. Wir werden verschiedene Zeichenfolgenmanipulationsmethoden wie split() und slice() zusammen mit Arraymethoden wie reduce() und map() verwenden, um diese Umwandlung zu erreichen. Dieses Lab wird Ihnen helfen, zu verstehen, wie man mit CSV-Daten in JavaScript umgeht und wie man sie in ein Format umwandeln kann, das leicht verarbeitet werden kann.


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

CSV in JSON

Um eine durch Kommata getrennte Werte (CSV)-Zeichenfolge in ein zweidimensionales Array von Objekten umzuwandeln und damit die Programmierung zu üben, öffnen Sie das Terminal/SSH und geben Sie node ein. Die erste Zeile der Zeichenfolge wird als Titelzeile verwendet. Hier sind die Schritte, um CSV in JSON umzuwandeln:

  1. Verwenden Sie Array.prototype.indexOf(), um das erste Zeilenumbruchzeichen (\n) zu finden.
  2. Verwenden Sie Array.prototype.slice(), um die erste Zeile (Titelzeile) zu entfernen und String.prototype.split(), um sie in Werte zu trennen, unter Verwendung des angegebenen Delimiters.
  3. Verwenden Sie String.prototype.split(), um für jede Zeile eine Zeichenfolge zu erstellen.
  4. Verwenden Sie String.prototype.split(), um die Werte in jeder Zeile zu trennen, unter Verwendung des angegebenen Delimiters.
  5. Verwenden Sie Array.prototype.reduce(), um für die Werte jeder Zeile ein Objekt zu erstellen, wobei die Schlüssel aus der Titelzeile extrahiert werden.
  6. Lassen Sie das zweite Argument, Delimiter, weg, um den Standarddelimiter , zu verwenden.

Hier ist der Code:

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

Um die Funktion zu testen, verwenden Sie die folgenden Beispiele:

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

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab CSV in JSON abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.