Parsing CSV file with straight Javascript

Question

I am trying to create a rather simple "Webapp" to make processing records easier.

The starting CSV file is as follows:

HeaderA,HeaderB,HeaderC
UserA-first,UserA-last,UserA-Active
UserB-first,UserB-last,UserB-Active
UserC-first,UserC-last,UserC-Active

I would like to take this data and create the following arrays

Var ColumnA = ["HeaderA", "UserA-first", "UserB-first", "UserC-first"];
Var ColumnB = ["HeaderB", "UserA-last", "UserB-last", "UserC-last"];
Var ColumnC = ["HeaderC", "UserA-Active", "UserB-Active", "UserC-Active"];

After I have them in the arrays I feel confident I can iterate through them the way I want.

The problems I am having are:

How to parse a CSV file that does not have a comma after the third column
How to do this with straight Javascript (no external libraries)

This is my first question on Stack Overflow so please be gentle with any mistakes I may have made :)

What have you tried so far? Typically your question should demonstrate your attempt and ask for pointers on your buggy solution - otherwise people think you're asking them to do your work. — maerics, May 20 '14 at 15:23
string.split but I cant get around the missing comma's after the third column... — , May 20 '14 at 15:24
@user3657152 You should edit your code attempt(s) into your question. — ajp15243, May 20 '14 at 15:30
So far I have tried using the string.split method in javascript however if I use a comma as the separator it combines ColumnC and ColumnA. also there are no spaces between the columns (I accidentally put spaces in my example). is there a way to use line breaks as a separator with String.split? — , May 20 '14 at 15:30
@user3657152 `'a\nb\nc'.split('\n')` works for me (gives `['a', 'b', 'c']`). — ajp15243, May 20 '14 at 15:32
the line break is only at the end other than that it is just separated by comma's, can I use'\n' and ',' both as separators with string.split? I just edited the question to replicate the exact CSV file syntax — , May 20 '14 at 15:34
@user3657152 If you use both in the same `split` call, then it will look for adjacent newlines/commas, which isn't what you want. You can split first on newlines to get an array of each line (so one element will be a string of a whole line), and then iterate over those and split on commas within each line to get each data item. You can then populate those into the appropriate arrays as you want. — ajp15243, May 20 '14 at 15:37

score 0 · Accepted Answer · answered May 20 '14 at 15:42

kei linked you to a post, this is your solution.

just include this function and use it on your data...

function CSVToArray( strData, strDelimiter ){
        // Check to see if the delimiter is defined. If not,
        // then default to comma.
        strDelimiter = (strDelimiter || ",");

        // Create a regular expression to parse the CSV values.
        var objPattern = new RegExp(
            (
                // Delimiters.
                "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +

                // Quoted fields.
                "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +

                // Standard fields.
                "([^\"\\" + strDelimiter + "\\r\\n]*))"
            ),
            "gi"
            );


        // Create an array to hold our data. Give the array
        // a default empty first row.
        var arrData = [[]];

        // Create an array to hold our individual pattern
        // matching groups.
        var arrMatches = null;


        // Keep looping over the regular expression matches
        // until we can no longer find a match.
        while (arrMatches = objPattern.exec( strData )){

            // Get the delimiter that was found.
            var strMatchedDelimiter = arrMatches[ 1 ];

            // Check to see if the given delimiter has a length
            // (is not the start of string) and if it matches
            // field delimiter. If id does not, then we know
            // that this delimiter is a row delimiter.
            if (
                strMatchedDelimiter.length &&
                (strMatchedDelimiter != strDelimiter)
                ){

                // Since we have reached a new row of data,
                // add an empty row to our data array.
                arrData.push( [] );

            }


            // Now that we have our delimiter out of the way,
            // let's check to see which kind of value we
            // captured (quoted or unquoted).
            if (arrMatches[ 2 ]){

                // We found a quoted value. When we capture
                // this value, unescape any double quotes.
                var strMatchedValue = arrMatches[ 2 ].replace(
                    new RegExp( "\"\"", "g" ),
                    "\""
                    );

            } else {

                // We found a non-quoted value.
                var strMatchedValue = arrMatches[ 3 ];

            }


            // Now that we have our value string, let's add
            // it to the data array.
            arrData[ arrData.length - 1 ].push( strMatchedValue );
        }

        // Return the parsed data.
        return( arrData );
    }

you may have to do some adjustments to the function if you want a different array structure but in the end it's the function you were looking for

Parsing CSV file with straight Javascript

1 Answers1