Read CSV files into Angular array

[TWG]

I’ve got 12 CSV files located in a /data folder in my project. Each one of the files is named based on the months(January.csv, February.csv, etc). The files look like the following.

/** DEMO CSV FILE **/
"Date","Contract_Number","Vendor","Value","Description","Method"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"
"12/02/2015","00001234","Test Vendor","          $30.00","","F00001234"

I’ve currently have the following javascript code but it’s not displaying any of the data.

<script type="text/javascript">
            var d = new Date(),
                n = d.getMonth(),
                months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

            var myApp = angular.module('myApp', []);

            myApp.controller('ReportListController', function($scope){
                $scope.reports = [
                    {
                        'name': 'September',
                        'data': []
                    },
                    {
                        'name': 'October',
                        'data': []
                    },
                    {
                        'name': 'November',
                        'data': []
                    },
                    {
                        'name': 'December',
                        'data': getCSV('December.csv').done(function(data){ CSV2JSON(data); })
                    },
                    {
                        'name': 'January',
                        'data': []
                    },
                    {
                        'name': 'February',
                        'data': []
                    },
                    {
                        'name': 'March',
                        'data': []
                    },
                    {
                        'name': 'April',
                        'data': []
                    },
                    {
                        'name': 'May',
                        'data': []
                    },
                    {
                        'name': 'June',
                        'data': []
                    },
                    {
                        'name': 'July',
                        'data': []
                    },
                    {
                        'name': 'August',
                        '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);
            }

            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>

HTML CODE

<table class="table table-striped report-list">
    <thead>
        <tr>
            <th>Date</th>
            <th>Contract #</th>
            <th>Vendor Name</th>
            <th>Value</th>
            <th>Description</th>
            <th>Method</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="data in report.data">
            <td>{{ data.Date }}</td>
            <td>{{ data.Contract_Number }}</td>
            <td>{{ data.Vendor }}</td>
            <td>{{ data.Value }}</td>
            <td>{{ data.Description }}</td>
            <td>{{ data.Method }}</td>
        </tr>
        <tr ng-if="data.length === 0">
            <td colspan="6"><p class="lead text-center">No data yet.</p></td>
        </tr>
    </tbody>
</table>

I get some blank rows but the table rows do not much up to the CSV rows. The CSV file has more rows than the table.

[mhodges44]

Saw that this is now your second thread trying to solve this issue. I think I understand what you’re trying to do, so I put together a codepen to demonstrate.

http://codepen.io/mhodges44/pen/LGRWwR

Let me know if this is what you were looking for, or if you still need assistance.

[Author]

Posts