通过 angularJS 的 CSV 解析器

Question

我正在通过 node 和 Angular 构建一个 CSV 文件解析器。所以基本上用户上传了一个csv文件，在我的服务器端节点上，csv文件被遍历并使用node-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

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

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

[
{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>

当然，有很多方法可以根据您的需要进行改进。

Answer 2

这更像是一个通用的数据结构/JS 问题，而不是 Angular 相关的问题。

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 循环或任何类似的事情，而且此代码也可以在不进行任何更改的情况下适用于两种以上的性别（即使是两种以上的惯用手 - 想想外星人和灵巧的人）。如果您不确定到底发生了什么，应该很容易区分此代码示例的单个步骤及其结果值。

以类似的方式计算所有性别的总行数。