如何格式化提取的 CSV 文件数据以显示在视图中

【问题标题】：How to format CSV file data fetched to display on view如何格式化提取的 CSV 文件数据以显示在视图中
【发布时间】：2016-10-28 02:23:34
【问题描述】：

我正在使用 Angular JS 中的自定义指令从 CSV 文件中获取保存的值。但是即将出现的数据包括标题，我只想在我的 UI 上显示第一列。

正在获取的样本数据：

Name,Gender,Age,Order,Quantity,Sales
Adrian ,M,14,10,47,11093
Adam,M,13,9,33,2954
Adam,M,14,10,34,1597
Aaron,F,10,6,28,1302
Adya ,F,16,12,34,1292
Aaron,M,9,5,30,839
Alan,F,11,7,24,756
Aimee,F,10,6,19,721

这里我想删除标题，只在 UI 上显示名称列。

我尝试使用 split 功能，但新行将数据弄乱了。

关于如何处理此问题的任何想法？

【问题讨论】：

标签： angularjs csv angularjs-directive

【解决方案1】：

function myCtrl($scope, $http) {
$scope.readCSV = function() {
    // http get request to read CSV file content
    $http.get('/angular/sample.csv').success($scope.processData);
};

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

}

查看

<button ng-click="readCSV()">
Display CSV as Data Table
</button>
<div id="divID">
  <table>
    <tr ng-repeat="x in data">
      <td ng-repeat="y in x">{{ y }}</td>
    </tr>
  </table>
</div>
<div>
<table>
</table>
</div>

【讨论】：