如何在表中的AngularJS HTTP中显示csv文件?

时间:2019-01-17 14:15:31

标签: angularjs http html-table import-from-csv

如果我不使用ng-repeat,则CSV文件中的数据会显示在浏览器中,但数据混乱且杂乱无章。我想把它放在一张桌子里,但是我不确定代码。以下代码无效,但这是我的最佳猜测。

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
    <div ng-app="myApp" ng-controller="myCtrl"> 
        <table border="1">
            <tr>
        <td ng-repeat='field in area'>{{field}}</td>
    </tr>
    </table>
        <button class="button" ng-click="click()">Button 1</button>
        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope, $http) {

                $scope.area= function() {               
                $scope.click = function() {

                    $http.get("test.csv").then(function (response) {
                        $scope.field =response.data;

                    });
                };
                };

            });
        </script>
    </div>
</body>

1 个答案:

答案 0 :(得分:0)

JavaScript无法直接解释csv格式。 首先需要一个转换器(例如:convert-csv-to-json) 通过npm安装

npm install convert-csv-to-json --save

在您的脚本中

// $scope.field =response.data;

let csvToJson = require('convert-csv-to-json');

let json = csvToJson.formatValueByType().getJsonFromCsv(response.data);
console.log(json) // You can do whathever you want