Write a program to convert an array of objects to a CSV string that contains only the columns specified using JavaScript

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:

<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": "geeks",
        "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
"geeks","org","12"
"devendra","salunke","31"
"virat","kohli","34"

devendrasalunke

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• javascript-array
• javascript-object
• JavaScript-DSA
• JavaScript-Questions

+2 More