JSON to CSV

JavaScriptJavaScriptBeginner
Practice Now

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

Introduction

In this lab, we will dive into the world of JavaScript programming and explore the process of converting JSON data to CSV format. Through this lab, you will learn how to use built-in methods such as join(), map(), and reduce() to convert an array of objects into a string that can be easily read and manipulated in spreadsheet software. This lab is perfect for those looking to gain a deeper understanding of data manipulation in 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`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("`Template Literals`") subgraph Lab Skills javascript/variables -.-> lab-28457{{"`JSON to CSV`"}} javascript/data_types -.-> lab-28457{{"`JSON to CSV`"}} javascript/arith_ops -.-> lab-28457{{"`JSON to CSV`"}} javascript/comp_ops -.-> lab-28457{{"`JSON to CSV`"}} javascript/array_methods -.-> lab-28457{{"`JSON to CSV`"}} javascript/higher_funcs -.-> lab-28457{{"`JSON to CSV`"}} javascript/destr_assign -.-> lab-28457{{"`JSON to CSV`"}} javascript/spread_rest -.-> lab-28457{{"`JSON to CSV`"}} javascript/template_lit -.-> lab-28457{{"`JSON to CSV`"}} end

Converting JSON to CSV

To convert an array of objects to a comma-separated values (CSV) string with specified columns, use the following function:

const JSONtoCSV = (arr, columns, delimiter = ",") =>
  [
    columns.join(delimiter),
    ...arr.map((obj) =>
      columns.reduce(
        (acc, key) =>
          `${acc}${!acc.length ? "" : delimiter}"${!obj[key] ? "" : obj[key]}"`,
        ""
      )
    )
  ].join("\n");

To use it, follow these steps:

  1. Open the Terminal/SSH and type node to start practicing coding.
  2. Call the JSONtoCSV function with the following arguments:
    • arr: an array of objects to be converted.
    • columns: an array of strings that specify the columns to be included in the CSV output.
    • delimiter: an optional string that specifies the delimiter to be used (default value is ',').
  3. The function will return a CSV string that contains only the specified columns and the objects' values.
  4. If no delimiter is specified, the default delimiter ',' will be used.
  5. Examples of how to use the function are provided in the code block below.
JSONtoCSV(
  [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }, { b: 7 }],
  ["a", "b"]
); // 'a,b\n"1","2"\n"3","4"\n"6",""\n"","7"'

JSONtoCSV(
  [{ a: 1, b: 2 }, { a: 3, b: 4, c: 5 }, { a: 6 }, { b: 7 }],
  ["a", "b"],
  ";"
); // 'a;b\n"1";"2"\n"3";"4"\n"6";""\n"";"7"'

Summary

Congratulations! You have completed the JSON to CSV lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like