Type the way you talk

Introduction One of the most common features in business applications is exporting data and downloading it in CSV format. It helps companies organize the data and generate report results or do anything they want. A CSV file contains data values separated by commas. It has an extension of `.csv` and can be edited by Spreadsheet programs such as Microsoft Office, Google Sheets, etc. Since CSV files are in plaintext, they're easier to import into other database storage. In this article, we will learn how the engineering team at Merlino Software Agency implemented exporting data to CSV files in the OneFood application. We will use the product’s model as the case study. To make it clear and straightforward, I divided this article into the two following sections: Front-end: This is implemented using Angular and is responsible for making a GET request to the back-end and saving the data as a CSV file. Back-end: This is implemented using ExpressJS and is responsible for querying the data and sending it to the front-end when requested. Firstly, I will explain what happens on the front-end side, and after that, we will head to the server-side. The case study’s architecture is implemented using Clean Architecture. If you want to know what Clean Architecture is and how to use it in Express applications, I have already written a blog. Feel free to check it here. Enough talking; let’s get our hands dirty by writing some code. Getting started Let's start by installing an NPM package called `file-saver`, which is a client-side file saving library and perfect when you generate files on the client. ```bash # Basic Node.JS installation npm install file-saver --save # Additional typescript definitions npm install @types/file-saver --save-dev ``` This package is built to export client-side-generated content, but our data will come from the server-side. We'll therefore need to address this. The Front-End Logic Let's start by creating a button in `products.component.html` and the function that will call our back-end and save the CSV file on the user's machine. ```html Downlad CSV ``` In your `products.component.ts` file instead, we will have the following method, which utilizes the `saveAs` function from the `file-saver` package we installed before: ```TypeScript // products.component.ts import {saveAs} from "file-saver"; import ProductService from "../services/product.service.ts"; constructor(private _productService: ProductService) {} downloadCSV(): void { this._productService.downloadCSV({ search: this.search, sellerId: this.sellerId }).subscribe((buffer) => { const data: Blob = new Blob([buffer], { type: "text/csv;charset=utf-8" }); // you may improve this code to customize the name // of the export based on date or some other factors saveAs(data, "products.csv"); }); } ``` As you notice, we rely on `downloadCSV` from `ProductService`, which attempts to get the data from the server and handles pagination search, etc. Here's what it looks like: ```TypeScript // product.service.ts /* * Download a CSV of products * * @param params * @param params.sort * @param params.search * @param params.sellerId */ downloadCSV( params: { sort?: string; search?: string; sellerId?: string; } = {} ): Observable { const {sort = "-createdAt", search, sellerId} = params; return this._httpClient.get(" /products/csv", { params: { ...(sort && {sort}), ...(search && {search}), ...(sellerId && {sellerId}) }, responseType: "text" }); } ``` As you can see, this method makes a GET request to the `products/csv` endpoint on line 18 and will return data back to the `downloadCSV` method in the `products.component.ts` file. The `downloadCSV` method receives the data as a buffer from the back-end. By setting the GET method's option `responseType` to `text`, we can pass it back to our component as is, constructing then a `Blob` object with it, which is what `file-saver` wants. When doing so, let's set `type` as `text/csv` as we need a CSV file and set the `charset` to `utf-8` to support all kinds of characters. After all this, we call the `saveAs` function of the `file-saver` package that we already installed at the beginning. That's it; all the data will be downloaded as a CSV file named `products.csv` in our use-case. If you want to read more about Blobs, click here. The Back-End logic Now that we know how to implement the front-end logic of downloading data in a CSV format using Angular, let's check what happens on the server-side when the `downloadCSV` method makes a GET request. Clean Architecture has four concentric circles that represent different areas of software: Entities, Use Cases, Interface Adapters, and Framework & Drivers. When the HTTP client calls the `products/csv` endpoint, the request goes to a private route called `products` which looks like this: ```JavaScript // app/routes/api/private/products.js import express from 'express'; import controller from 'controllers/api/productController'; import makeExpressCallback from 'routes/make-callback'; const router = express.Router(); router.route('/products').get(makeExpressCallback(controller.getAllProducts)); router.route('/products/csv').get(makeExpressCallback(controller.makeGetProductsCSV)); // … export default router; ``` The `products.js` file handles many requests related to the `product`, yet you see the `/products/csv` route, which is a GET request, and the `makeGetProductsCSV` function is wrapped in `makeExpressCallback` and passed to it. Let's start with the `makeGetProductsCSV` function implementation, and then we will discuss what the wrapper does: ```JavaScript // app/use-cases/api/products/get-products-csv.js import {asSafe} from "services/common"; import {downloadResource} from "services/utility"; export default function makeGetProductsCSV({productsDb}) { return async function getProductsCSV({query}) { const {search, sort = "-createdAt", sellerId} = query; const options = { sort }; let filter = { ...(sellerId && {sellerId}), deleted: false }; if (search && search !== "") { const $regex = new RegExp(`.*${search}.*`, "ig"); filter = { ...filter, $or: [ {name: {$regex}} // … ] }; } let products = await productsDb.find(filter, options); // clean up object and get rid on useless fields products = asSafe(products); const fields = [ {label: "ID", value: "_id"}, {label: "Product name", value: "name"}, {label: "Seller name", value: "sellerName"}, {label: "Description", value: "description"}, {label: "Categories", value: "category"}, // … ]; return { contentType: "text/csv", fileName: "product.csv", csv: downloadResource(fields, products) }; }; } ``` As you can notice, in this file we use a method called `downloadResource` imported from a common utility file. This function is defined below and uses a package that helps us transform JSON to CSV: ```JavaScript // services/utility.js import {Parser} from 'json2csv'; /** * Transform Mongo list to CSV * @param fields This is an array of objects that has a number of * ... functionalities which includes, specifying what values should be * ... parsed from data sent, giving a custom header to each column, etc. * @param data This is an array of objects representing data to be * ... populated in the CSV file * @returns {*} */ const downloadResource = (fields, data) => { const json2csv = new Parser({fields}); return json2csv.parse(data); }; ``` Moreover, in the use-case snippet above: The `search`, `sort`, and `sellerId` variables were destructured from the query. The `options` and `filter` objects were defined. The product records are fetched from the database according to the `options` and `filter` objects’ criteria. The unnecessary columns are filtered out from the product records using the `asSafe` function. The `fields` array was defined, which presents the row and columns. The CSV data plus the `contentType` and `fileName` properties are returned as an object to the client-side. Yes, it was that easy. The `makeExpressCallback` is a wrapper function that receives the `req` and `res` as inputs from the `.get()` and `.post()` routes of Express, creates a clean request object with all possible useful information needed by use cases, handles whatever it's returned by controllers (i.e., data or errors), and replied to clients in a standardized way. Here's what it looks like: ```JavaScript // app/routes/make-callback.js controller(httpRequest) .then((httpResponse) => { if (httpResponse && httpResponse.contentType === 'application/octet-stream') { res.setHeader('content-disposition', `attachment; filename=${httpResponse.fileName}`); res.set('Content-Type', 'application/octet-stream'); res.attachment(httpResponse.fileName); res.status(200).send({success: true}); } if (httpResponse && httpResponse.contentType === "text/csv" && httpResponse.csv) { res.setHeader("content-disposition", `attachment; filename=${httpResponse.fileName}`); res.setHeader("Content-Type", "text/csv"); res.attachment(httpResponse.fileName); return res.status(200).send(httpResponse.csv); } res.set('Content-Type', 'application/json'); res.type('json'); const body = { success: true, code: 200, language: AcceptLanguage, data: httpResponse }; res.status(200).send(body); }) .catch((e) => { console.error(e); console.log(JSON.stringify(e)); res.status(400).send({ success: false, code: 400, language: AcceptLanguage, error: { description: e?.errors?.customsCode?.message || e.message } }); }); ``` If you want to know more about Clean Architecture, I have already written a blog that you can read here. Conclusion In the programming world, there might be a hundred ways to solve a problem, but we choose the most efficient solution and implement it in a clean way. I hope that this article helped you to do so. The Angular part was straightforward to implement, while the back-end might have complicated because it is implemented using Clean Architecture. You can implement your solution for the back-end without using Clean Architecture but trust me: it will take you a bit to familiarize yourself with it and implement it in your next project but, it will make your life so much easier and will help you keep your code clean, structured and tested as you add complexity to it. If you find this helpful or have any suggestions, please reach me through Twitter. Also, don't forget to share it with your friends, colleagues, and network if you like it. Talk to you soon!

Type the way you talk

Step-by-Step: How to Download a CSV File using Angular

Step-by-Step: How to Implement OAuth2 Server in ExpressJS

Merlino Software Agency Receives Second Clutch Review, Earns Second 5-Star Review

Services

Projects

Other

Subscribe now to Merlin Coding