CSV解析器通过angularJS

Question

我正在通过节点和Angular构建一个CSV文件解析器。所以基本上用户上传一个csv文件，在我的服务器端，即使用node-csv遍历和解析csv文件的节点 。这工作正常，它返回一个基于作为输入的csv文件的对象数组。现在在角度端我需要显示两个表一个是csv文件数据本身而另一个是cross tabulation分析。我在渲染数据时遇到问题，因此对于像

这样的表

我正在解析回复

对于交叉制表，我们需要以表格形式显示数据

我有一个对象数组，我需要以最佳方式操作，以便在html页面上轻松渲染。我没有办法如何对我得到的数据进行计算，以便存储交叉制表结果。任何关于我应该如何处理的想法。

数据json是：

[{"Sample #":"1","Gender":"Female","Handedness;":"Right-handed;"},{"Sample #":"2","Gender":"Male","Handedness;":"Left-handed;"},{"Sample #":"3","Gender":"Female","Handedness;":"Right-handed;"},{"Sample #":"4","Gender":"Male","Handedness;":"Right-handed;"},{"Sample #":"5","Gender":"Male","Handedness;":"Left-handed;"},{"Sample #":"6","Gender":"Male","Handedness;":"Right-handed;"},{"Sample #":"7","Gender":"Female","Handedness;":"Right-handed;"},{"Sample #":"8","Gender":"Female","Handedness;":"Left-handed;"},{"Sample #":"9","Gender":"Male","Handedness;":"Right-handed;"},{"Sample #":";"}

Answer 1

这是一个比Angular相关的更一般的数据结构/ JS问题。

Functional helpers from Lo-dash非常方便：

_(data) // Create a chainable object from the data to execute functions with
.groupBy('Gender') // Group the data by its `Gender` attribute
// map these groups, using `mapValues` so the named `Gender` keys persist
.mapValues(function(gender) {
  // Create named count objects for all handednesses
  var counts = _.countBy(gender, 'Handedness');
  // Calculate the total of all handednesses by summing
  // all the values of this named object
  counts.Total = _(counts)
    .values()
    .reduce(function(sum, num) { return sum + num });
  // Return this named count object -- this is what each gender will map to
  return counts;
}).value(); // get the value of the chain

无需担心for循环或任何类型的东西，并且这个代码也可以在不超过两个性别的情况下进行任何更改（即使是超过两个手段 - 想想外星人和双手灵巧）。如果你不确定究竟发生了什么，那么选择这个代码示例的单个步骤及其结果值应该很容易。

计算所有性别的总行将以类似的方式工作。

Answer 2

有很多方法可以做到这一点，因为你没有非常具体的使用方法，我会选择最简单的方法。

假设你有一个像这样的对象结构：

[
{gender: 'female', handdness: 'lefthanded', id: 1},
{gender: 'male', handdness: 'lefthanded', id: 2},
{gender: 'female', handdness: 'righthanded', id: 3},
{gender: 'female', handdness: 'lefthanded', id: 4},
{gender: 'female', handdness: 'righthanded', id: 5}
]

并且在你的控制器中你已经用以下内容公开了这个：

$scope.members = [the above array of objects];

并且您想要显示此对象的女性成员总数，您可以在html

中对其进行过滤

 {{(members | filter:{gender:'female'}).length}}

现在，如果你打算把它变成一个表格，它显然会制作一些丑陋且难以理解的html，所以特别是如果你要重复使用它，那么制作一个指令并在任何地方重复它都是一个很好的例子，在父作用域中提供名为tabData（或任何您想要的）的作用域对象的先决条件

.directive('tabbed', function () {
  return {
    restrict: 'E',
    template: '<table><tr><td>{{(tabData | filter:{gender:"female"}).length}}</td></tr><td>{{(tabData | filter:{handedness:"lefthanded"}).length}}</td></table>'
  }
});

你会在你的html中使用它：

 <tabbed></tabbed>

如你所愿，有很多方法可以改善这一点。