在Javascript和AngularJS中解析CSV

所以我試圖創建一個基本的角度應用程序來解析一些CSV輸入，並用解析的數據填充表格。在Javascript和AngularJS中解析CSV

你可以看到什麼，我想在這裏實現了plunker - 基本上http://plnkr.co/edit/6QFT4AcV4KpiSG23EdOS

- 正如你所看到的 - 我有一個<textarea>當用戶將一些CSV粘貼，和下面的表應該再充滿數據。

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

這是JavaScript我到目前爲止，但我有幾件事 1.從名字上分離該電子郵件 2.推數據回$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" 
      }); 

     }; 

    }); 

});

掙扎

一些基本信息：

的CSV將兩列（姓名，電子郵件）和看起來像這樣：

John Thompson,[email protected] 
Robin Peters, [email protected] 
Bill Bob, [email protected]

來源

2014-06-06 user2656127

請注意，解析CSV不僅僅是分隔符，如果您想完全支持CSV格式，請使用「真實」解析器（例如http://papaparse.com/） –

代碼中的許多問題：

你可以在你的輸入，而不是正則表達式探微採用分體式，它使一切都更容易
你的HTML是無效td應該是內部tr，而不是周圍的其他方式
你的陣列是不會被清零
你裏面ng-repeat綁定並沒有使用可變i定義如下：i in inviteList
你應該避免無範圍的變量（不var關鍵字）儘可能

否則，當你將一個字符串分解，剛進入分裂元素通過他們的索引。

更正代碼：

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

你的代碼（尤其是JS），能夠進一步提高了很多，我建議你閱讀文檔/教程更多。

和here是您的工作代碼的蹲點。

來源

2014-06-06 11:50:38

謝謝Florian！ – user2656127

我會創建一個過濾器來解析數據並在需要的地方重複使用。邏輯：

app.controller('MainCtrl', function($scope, $filter) { 
    $scope.data = 'John Thompson,[email protected]\nRobin Peters, [email protected]\nBill Bob, [email protected]'; 

    $scope.$watch('data', function(val){ 
    $scope.inviteList = $filter('csvToObj')(val); 
    }); 
}); 

app.filter('csvToObj', function() { 
    return function(input) { 
    var rows = input.split('\n'); 
    var obj = []; 
    angular.forEach(rows, function(val) { 
     var o = val.split(','); 
     obj.push({ 
     name: o[0], 
     email: o[1], 
     status: "not sent" 
     }); 
    }); 
    return obj; 
    }; 
});

樣品展示：http://plnkr.co/edit/SOtMMLft3amlVm4RROd0?p=preview

來源

2014-06-06 11:40:22 guru

謝謝！很好地工作，有點改變我的結構，但是這更好！ – user2656127

當你分割字符串，返回值是一個數組。我相信，你只需要訪問數據陣列的正確索引：

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 = data[1]; 
      var name = data[0]; 

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

     }; 

    }); 

});

來源

2014-06-06 11:40:39 HaukurHaf

在Javascript和AngularJS中解析CSV

回答

相關問題