When we want to store multiple values in one variable then instead of a variable, we use an array. which allows you to store multiple types of data for example you could have a string, an integer, etc.
In this article, we will learn to convert the array objects to CSV string data.
Given array objects ( key: value ) to CSV string comma-separated values and keys as header.
Input : [
Name: "geek",
Roll Number: 121,
Age: 56
]
Output: Name, Roll Number, Age
geek, 121, 56
Before getting into code we must know some about the following Array functions.
- Map() function: Array.prototype.map() function used when we want to transform each value of the array and want to get a new array out of it.
- Object.Key() Function: object.keys() method returns the key properties of this array. as we need a header for CSV data so our header is going to be the keys of an object so to get the header we use Object.key() method.
- Push() function: The Array.push() method is used to add one or multiple elements to an array. It returns the new length of the array formed.
- Join() function: The Array.prototype.join() method is used to join the values of an array into a string. The values of the string will be separated by a specified separator and its default value is a comma(, ).
Approach:
- Create an empty array first to store all data of an object in form of rows.
- Using the Object.keys() method fetches all keys of an object which are going to be the first row of the CSV table.
- map() method iterate over all objects and append all values to the “csvRow[]” array along with comma(,) separator using the join() method.
- push() method will push all data into “csvRow[]” array fetched by map() and Objects.keys().
- after mapping, each row new line will be added by the join(“\n”) method.
Example: Below is the implementation of the above approach:
Javascript
<script> const objectToCsv = function (data) { const csvRows = []; /* Get headers as every csv data format has header (head means column name) so objects key is nothing but column name for csv data using Object.key() function. We fetch key of object as column name for csv */ const headers = Object.keys(data[0]); /* Using push() method we push fetched data into csvRows[] array */ csvRows.push(headers.join(',')); // Loop to get value of each objects key for (const row of data) { const values = headers.map(header => { const val = row[header] return `"${val}"`; }); // To add, separator between each value csvRows.push(values.join(',')); } /* To add new line for each objects values and this return statement array csvRows to this function.*/ return csvRows.join('\n'); }; const data = [{ "firstname": "neveropen", "lastname": "org", "age": 12 }, { "firstname": "devendra", "lastname": "salunke", "age": 31 }, { "firstname": "virat", "lastname": "kohli", "age": 34 }, ]; // Data passed as parameter const csvData = objectToCsv(data); console.log(csvData); </script> |
Output:
firstname,lastname,age "neveropen","org","12" "devendra","salunke","31" "virat","kohli","34"
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
