Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Parse CSV to an Array for Angular

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #235866
    TWG
    Participant

    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>
    
    #235871
    nkrisc
    Participant
    #235886
    TWG
    Participant

    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>
    
    #236130
    mhodges44
    Participant

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.