Question

我使用Angular JS中的Custom Directive从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上显示“名称”列。

我尝试使用拆分功能，但新行正在弄乱数据。

有关如何处理此事的任何想法？

提前致谢。

Answer 1

希望这会对你有帮助。这是按标题

解析值

csv = "heading1,heading2,heading3,heading4,heading5\nvalue1_1,value2_1,value3_1,value4_1,value5_1\nvalue1_2,value2_2,value3_2,value4_2,value5_2",


$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "/echo/html/",
        dataType: "text",
        data: {
            html: csv
        },
        success: function(data) {
            processData(data);
        }
    });
});

function processData(allText) {
    var allTextLines = allText.split(/\r\n|\n/);
    var headers = allTextLines[0].split(',');
    var lines = [];

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        if (data.length == headers.length) {

            var tarr = [];
            for (var j=0; j<headers.length; j++) {
                tarr.push(headers[j]+":"+data[j]);
            }
            lines.push(tarr);
        }
    }
console.log(lines);
}

感谢@kirtan的回答

http://jsfiddle.net/mblase75/dcqxr/

Answer 2

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>

如何格式化要在视图上显示的CSV文件数据

2 个答案: