CSV file contains Comma separated values, records are distinguished by new line. By using split function we can get records easily.

Program Flow

  1. Get CSV file content using HTTP request
  2. Process CSV file data
  3. Format JavaScript object and display it in a table

Markup to display CSV content in Table

<table>
    <tr ng-repeat="x in data">
      <td ng-repeat="y in x">{{ y }}</td>
    </tr>
</table>

Script

$scope.processData = function(allText) {
    // split content based on new line
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for ( var i = 0; i < allTextLines.length; i++) {
        // split content based on comma
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {
            var tarr = [];
            for ( var j = 0; j < headers.length; j++) {
                tarr.push(data[j]);
            }
            lines.push(tarr);
        }
    }
    $scope.data = lines;
};

2 comments:

  1. how to display in html table using input type file

    ReplyDelete
  2. thanks this is very helpfull but this is not working csv file which contain two blank colom like "","" can u pls help me

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts