Convert an array of objects to CSV string in JavaScript

On some occasions at work, we've needed to generate a CSV string on the server-side to send to our front-end app where the user can download a spreadsheet file e.g. report.

Naturally, there are already packages out there that can handle a variety of CSV use cases, but we just wanted a simple solution in JavaScript as we knew that the data structure coming from our database was always going to be an array of objects.

Before we continue though, it's worth pointing out that we'll be using a few JavaScript methods and techniques in the solution that you may or may not already be familiar with:

• Array.prototype.map()
• Array.prototype.join()
• Spread syntax

If any of the above seem a little alien to you right now, then feel free to take a quick pause here to check them out and come back when you're feeling more comfortable with them.

---

Welcome back if you took that break 👋

So, how do we get from an array of objects to a CSV string while ensuring that the correct data will be displayed in the column headers and rows?

Let's start by creating our array of objects:

const itemsArray = [
      { itemId: 1, itemRef: "Item 001" },
      { itemId: 2, itemRef: "Item 002" },
      { itemId: 3, itemRef: "Item 003" }
    ];

The first step towards creating the CSV string is to define our column headers and extract the key-value pairs into their own arrays:

const csvString = [
    [
      "Item ID",
      "Item Reference"
    ],
    ...itemsArray.map(item => [
      item.itemId,
      item.itemRef
    ])
  ];

console.log(csvString);
/*
   [
    ["Item ID", "Item Reference"],
    [1, "Item 001"],
    [2, "Item 002"],
    [3, "Item 003"]
   ]
*/

Now that we have all our data in arrays, we can use our .map() and .join() methods to bring everything together:

const csvString = [
    [
      "Item ID",
      "Item Reference"
    ],
    ...itemsArray.map(item => [
      item.itemId,
      item.itemRef
    ])
  ]
   .map(e => e.join(",")) 
   .join("\n");

console.log(csvString);
/*
  "Item ID,Item Reference
  1,Item 001
  2,Item 002
  3,Item 003"
*/

What happens here then? Well, the first map/join combo combines the array of 4 arrays into a single array containing the headers and key-value pairs as string types e.g. "1,Item 001". Then, the final join is needed to convert the single array into a string.

---

In this post, we managed to convert an array of objects into a CSV string using some helpful array methods and the spread syntax in JavaScript.

Please copy and experiment with the above code and feel free to ask me any questions on here or over on Twitter.

Thanks for reading!

Comments

[Felippe Regazio]

Just a contribution: To properly escape de resulting CSV, you can add a map to the items array:

const csvString = [
    [
      "Item ID",
      "Item Reference"
    ],
    ...itemsArray.map(item => [
      item.itemId,
      item.itemRef
+    ].map(str => `"${str.replace(/"/g, '\"')}"`)))
  ]
   .map(e => e.join(",")) 
   .join("\n");

This will:

1. wrap the item with "double quotes"
2. replace inner double quotes from " to ""

Reference: stackoverflow.com/questions/466379...

[Fran]

Thanks for the article to the creator, and also thanks for this contribution, it was perfect for me!

[Anders]

It would probably be wise to have a step where you properly encode each value before putting it in a CSV "column", this would break if you have certain characters in your value

[Jalu Pujo Rumekso]

how do you encode it btw?

[Sam Jones]

Good point, Anders!

[Luciano Mammino]

Nice article @samueldjones !

A suggestion for a follow-up post, do something similar but using streams, so you can process arbitrarily big datasets 🤓

(I know, I like streams way too much!)

[Sam Jones]

Thanks, Luciano!

Good idea on the streams, I'll make a note of that 📝