Converting Json to CSV in Javascript

Question

I am trying to convert JSON to CSV, I referred Converting JSON File to CSV with JavaScript, and How to export JavaScript array info to csv (on client side)?
As my data is nested under Rows it is bringing the JSON in single-single character lines.
Sample JSON
Expected Output

UPDATE

I am receiving a base 64 string sample
Then decoding the base-64 as below

let jsonContent = atob(base_64_string);

Your data has lists within each top-level line. You should provide an example of how you're expecting the .csv file to look: All headers, and perhaps some sample data. — Jeroen Verfaillie, Aug 16 '22 at 07:27
@JeroenVerfaillie I have updated the expected output in the question. Thankyou for the recommendation. — Lav Sharma, Aug 16 '22 at 08:53

Jeroen Verfaillie · Accepted Answer · 2022-08-16T10:08:48.983

1

This could help you. The headers are the ones from the json input at the moment, but if you desire the ones in your csv output example you can easily swap them.

//Added after discussion: It shows you how to prepare your base-64 string
//transform base 64 string in a decoded string
let decoded_string = atob(base_64_string);

let jsonString = JSON.parse(decoded_string);

//Example data - uncomment if you instead immediately paste the json object
//let jsonString = <redacted>;//redacted for brevity, but just paste your json file here if you want an example

//Select our data from the raw object
var data = JSON.parse(jsonString.Rows);

//Desired headers in the .csv. Other fields are ignored
let headers = ["Transaction_Date","Particulars","Amount",'Cr_Dr', "Balance", "Transaction_Type","Normalized_Party_Name_Label", "Normalized_Charge_Name_Label", "Charge_Class"]
//Choose your seperator
const seperator = ",";

//Prepare csv with a header row and our data
const csv = [headers.join(seperator),
...data.map(row => headers.map(field => `${row[field]}`).join(seperator))
]

//Export our csv in rows to a csv file
let csvContent = "data:text/csv;charset=utf-8," 
    + csv.join("\n");
var encodedUri = encodeURI(csvContent);
window.open(encodedUri);

working playcode example:

https://playcode.io/942411

edited Aug 16 '22 at 10:08

answered Aug 16 '22 at 09:29

Jeroen Verfaillie

611
1
4
16

Facing ```Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse () at HTMLButtonElement.Tabeller``` at ```var data = JSON.parse(jsonString.Rows);```. I pasted my json string a ```let jsonString = ``` – Lav Sharma Aug 16 '22 at 09:33
Don't use the < > symbols. Just paste your data raw. – Jeroen Verfaillie Aug 16 '22 at 09:33
I am just using it to represent, I have directly pasted the raw data, which is the same [here](https://drive.google.com/file/d/1BGEHId7e0GK07K3CfzLYBAxppz2Qptth/view?usp=sharing) – Lav Sharma Aug 16 '22 at 09:34
I've added a [working playcode example](https://playcode.io/942411) – Jeroen Verfaillie Aug 16 '22 at 09:36
When I am passing it through a variable I am facing the error, but when directly passing it I am not getting the error. The thing is I am first getting the ```base-64``` string, decoding it and then passing it. Do you know why I am facing the error when passing it through a variable ? For example, ```let jsonContent = atob(base_64_string); let jsonString = jsonContent``` – Lav Sharma Aug 16 '22 at 09:42
can you update your question with the relevant code? It's hard to guess what exactly you're doing wrong without viewing it. You can provide code by placing it between backticks `` – Jeroen Verfaillie Aug 16 '22 at 09:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247304/discussion-between-jeroen-verfaillie-and-lav-sharma). – Jeroen Verfaillie Aug 16 '22 at 09:47

score -2 · Answer 2 · answered Aug 16 '22 at 07:53

This may help you

<html>
<head>
    <title>Demo - Covnert JSON to CSV</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>

    <script type="text/javascript">
        // JSON to CSV Converter
        function ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
            var str = '';

            for (var i = 0; i < array.length; i++) {
                var line = '';
                for (var index in array[i]) {
                    if (line != '') line += ','

                    line += array[i][index];
                }

                str += line + '\r\n';
            }

            return str;
        }

        // Example
        $(document).ready(function () {

            // Create Object
            var items = [
                  { name: "Item 1", color: "Green", size: "X-Large" },
                  { name: "Item 2", color: "Green", size: "X-Large" },
                  { name: "Item 3", color: "Green", size: "X-Large" }];

            // Convert Object to JSON
            var jsonObject = JSON.stringify(items);

            // Display JSON
            $('#json').text(jsonObject);

            // Convert JSON to CSV & Display CSV
            $('#csv').text(ConvertToCSV(jsonObject));
        });
    </script>
</head>
<body>
    <h1>
        JSON</h1>
    <pre id="json"></pre>
    <h1>
        CSV</h1>
    <pre id="csv"></pre>
</body>
</html>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Aug 19 '22 at 07:36

Converting Json to CSV in Javascript

2 Answers2

Linked