Parse CSV to an Array for Angular

[TWG]

I hope I can explain this well.

I’m making a small Angular project to take data from multiple CSV files and then display it in a tabulated page with tables. The part I’m having issues with is getting the data from CSV to Array.

Can anyone help me with just that part. I’ve seen a bunch of posts online about using javascript/jquery to read the CSV into an array but can’t get any of them to work.

I was hoping to write a simple function that I can include in inline js to parse the different files on page load and then send that data into my Angular array to be used.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">

</script>

[nkrisc]

There seems to be many ways: https://www.google.com/#q=angular%20parse%20csv

[TWG]

So I’ve managed to work out a small solution but my issue is now that I can’t iterate through my data in the array for Angular.

<script type="text/javascript">
            var purchasingApp = angular.module('purchasingApp', []);

            purchasingApp.controller('ReportListCtrl', function($scope){
                $scope.reports = [
                    //{'name': 'September', 'data': $.csv.toArray('data/september')},
                    {
                        'name': 'September',
                        'data': getCSV('data.csv').done(function(data){ CSV2JSON(data); })
                    },
                    {'name': 'October'},
                    {'name': 'November'},
                    {'name': 'December'},
                    {'name': 'January'},
                    {'name': 'February'},
                    {'name': 'March'},
                    {'name': 'April'},
                    {'name': 'May'},
                    {'name': 'June'},
                    {'name': 'July'},
                    {'name': 'August'}
                ];
                console.log($scope.reports);
            });

            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);
            }

            function CSV2JSON(csv) {
                var array = CSVToArray(csv);
                var objArray = [];
                for (var i = 1; i < array.length; i++) {
                    objArray[i - 1] = {};
                    for (var k = 0; k < array[0].length && k < array[i].length; k++) {
                        var key = array[0][k];
                        objArray[i - 1][key] = array[i][k]
                    }
                }

                var json = JSON.stringify(objArray);
                var str = json.replace(/},/g, "},\r\n");

                return str;
            }

            function getCSV(filename)
            {
                return $.ajax({
                    type: "GET",
                    url: "data/" + filename,
                    dataType: "text"
                });
            }
        </script>

[mhodges44]

Check out my reply to your newest post of this issue: https://css-tricks.com/forums/topic/read-csv-files-into-angular-array/

[Author]

Posts