在Javascript和AngularJS解析CSV [英] parsing CSV in Javascript and AngularJS

问题描述

所以我想创建一个基本的角应用程序，分析一些CSV输入，并填写一个表所分析的数据。

您可以看到什么，我想在这里实现了plunker - http://plnkr.co/edit / 6QFT4AcV4KpiSG23EdOS

基本上 - 你可以看到 - 我有一个＆LT; textarea的＆GT; ，用户将在一些CSV糊状，然后下面的表格应充满数据。

 ＆LT; D​​IV CLASS =excelArea＆GT;
    ＆LT; textarea的名字=excelDataNG模型=excelData＆GT;＆LT; / textarea的＆GT;
＆LT; / DIV＆GT;
 

这是JavaScript我到目前为止，但我有几件事挣扎
1.从名称分离该电子邮件
2.推数据回 $ scope.inviteList;

  app.controller（InviteController功能（$范围）{    // Initliase对象
    $ scope.excelData =;
    $ scope.errorMessage =;
    $ scope.inviteList = [];    $范围。$表（excelData功能（）{        VAR行，行号，数据长度;        线= $ scope.excelData.match（/ [^ \\ r \\ n] + / G）;
        LINENUMBER = 0;        对于（VAR I = lines.length  -  1; I＆GT; = 0;我 - ）{            L =行[I]
            LINENUMBER ++;
            数据= l.split（/ \\ t /）;            VAR电子邮件=？ ？ ？
            变量名称=？ ？ ？            $ scope.inviteList.push（{
                名称：姓名，
                电子邮件：电子邮件，
                状态：不发送
            }）;        };    }）;}）;
 

一些基本信息：

该CSV将两列（姓名，电子邮件），并会是这样的：

 约翰·汤普森，约翰@ thompson.com
罗宾·彼得斯，[e-mail]
比尔·鲍勃，[e-mail]
 

解决方案

在您的code诸多问题：

• 您可以在您的输入，而不是正则表达式探微采用分体式，它让一切更容易


• 您的HTML是无效的 D 应该在 TR ，而不是周围的其他方法


• 您的阵列不会被清零


• 您 NG-重复里面绑定未使用变量 I 定义如下：我inviteList


• 您应该避免无作用域的变量（没有 VAR 关键字）尽可能

否则，当你将一个字符串分解，只是通过他们的索引来访问的分裂元素。

修正code：

JS

  $范围。$表（excelData功能（）{
    VAR行，行号，数据长度;
    $ scope.inviteList = [];
    线= $ scope.excelData.split（'\\ n'）;
    LINENUMBER = 0;
    对于（VAR I = lines.length  -  1; I＆GT; = 0;我 - ）{
        L =行[I]        LINENUMBER ++;
        数据= l.split（，）;        变量名称=数据[0];
        变种电子邮件=数据[1];        $ scope.inviteList.push（{
            名称：姓名，
            电子邮件：电子邮件，
            状态：不发送
        }）;
    }
}）;
 

HTML

 ＆LT;表＆gt;
    ＆所述; TR＆GT;
      ＆LT;第i个姓名和LT; /第i
      ＆LT;第i个电子邮件和LT; /第i
      ＆LT;第i状态和LT; /第i
    ＆LT; / TR＆GT;
    ＆LT; TR NG重复=我inviteList＆GT;
      ＆所述; TD＆GT; {{i.name}}＆下; / TD＆GT;
      ＆所述; TD＆GT; {{i.email}}＆下; / TD＆GT;
      ＆所述; TD＆GT; {{i.status}}＆下; / TD＆GT;
    ＆LT; / TR＆GT;
  ＆LT; /表＆gt;
 

您code（尤其是JS）仍然可以改善了很多，我建议你阅读文档/教程以上。

和这里是plunker到您的工作code。

So I'm trying to create a basic angular application that parses some CSV input, and fills a table with the parsed data.

You can see a plunker of what I'm trying to achieve here - http://plnkr.co/edit/6QFT4AcV4KpiSG23EdOS

Basically - as you can see - I have a <textarea> where the user will paste in some CSV, and the table below should then be filled with the data.

<div class="excelArea">
    <textarea name="excelData" ng-model="excelData"></textarea>
</div>

This is the javascript I have so far, but I'm struggling with a few things 1. Seperating the email from the name 2. Pushing the data back into the $scope.inviteList;

app.controller("InviteController", function($scope) {

    //Initliase objects
    $scope.excelData = "";
    $scope.errorMessage = "";
    $scope.inviteList = [];

    $scope.$watch("excelData", function() {

        var lines, lineNumber, data, length;

        lines = $scope.excelData.match(/[^\r\n]+/g);
        lineNumber = 0;

        for (var i = lines.length - 1; i >= 0; i--) {

            l = lines[i];
            lineNumber++;
            data = l.split(/\t/);

            var email = ? ? ?
            var name = ? ? ?

            $scope.inviteList.push({
                name: name,
                email: email,
                status: "not sent"
            });

        };

    });

});

Some basic information:

The CSV will be two columns (name, email) and will look like this:

John Thompson,[e-mail]
Robin Peters, [e-mail]
Bill Bob, [e-mail]

解决方案

Many problems in your code :

• You could juste use split on your input instead of regexes, it makes everything easier
• Your HTML isn't valid td should be inside tr and not the other way around
• Your array was never cleared
• Your bindings inside ng-repeat didn't use variable i defined here : i in inviteList
• You should avoid unscoped variables (without var keyword) whenever possible

Otherwise, when you split a string, just access the splitted elements through their index.

Corrected code :

JS

$scope.$watch("excelData", function() {
    var lines, lineNumber, data, length;
    $scope.inviteList = [];
    lines = $scope.excelData.split('\n');
    lineNumber = 0;
    for (var i = lines.length - 1; i >= 0; i--) {
        l = lines[i];

        lineNumber++;
        data = l.split(',');

        var name = data[0];
        var email = data[1];

        $scope.inviteList.push({
            name: name,
            email: email,
            status: "not sent"
        });
    }
});

HTML

  <table>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
    <tr ng-repeat="i in inviteList">
      <td>{{i.name}}</td>
      <td>{{i.email}}</td>
      <td>{{i.status}}</td>
    </tr>
  </table>

Your code (especially JS) can still be improved a lot and i encourage you to read docs/tutorials more.

And here is the plunker to your working code.

这篇关于在Javascript和AngularJS解析CSV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！