使用underscore.js在javascript中分组/计数

jdm*_*lon 4 javascript arrays highcharts underscore.js

我是javascript(以及Stack Overflow)的新手,我遇到了一个我似乎无法解决的问题.我正在尝试生成一个简单的饼图,显示我的数据中每个技术值的项目数.这是我正在使用的数据类型:

  • [Project1,Java]
  • [Project2,Excel]
  • [Project3,SAS]
  • [Project4,Java]

上例中的饼比为2:1:1.

我的代码的第一部分加载数据并将其推送到包含[project,tech]的数组"techArray".这部分工作正常 - 我已经在代码的简化版本中验证了它.

然后我想将数组"techArray"分组并计算每个技术的实例.为此,我使用的是Underscore库,如下所示:

var chartData = [];
var techData = _.groupBy(techArray, 'tech');
_.each(techData, function(row) {
    var techCount = row.length;
    chartData = push( {
        name: row[0].tech,
        y: techCount
    });
});
Run Code Online (Sandbox Code Playgroud)

然后该脚本使用highcharts呈现chartData数组.同样,我已经验证此部分使用简化(未组合)版本.

上面列出的分组/计数步骤一定存在问题,因为我看不到输出,但我根本找不到位置.我的解决方案基于以下工作示例:工作示例.

如果有人能够在我写的内容中发现错误,或者提出另一种分组阵列的方法,我将非常感激.这似乎应该是一个比它证明的更简单的任务.

Gru*_*nny 18

countBy可以用来代替groupBy:

var techArray = [
    { project: 'Project1', tech: 'Java'},
    { project: 'Project2', tech: 'Excel'},
    { project: 'Project3', tech: 'SAS'},
    { project: 'Project4', tech: 'Java'},
];

var counts = _.countBy(techArray,'tech');
Run Code Online (Sandbox Code Playgroud)

这将返回一个对象,其中tech为属性,其值为count:

{ Java: 2, Excel: 1, SAS: 1 }
Run Code Online (Sandbox Code Playgroud)

要获取highcharts表单中的数据,请使用map而不是每个:

var data = _.map(counts, function(value, key){
    return {
        name: key,
        y: value
    };
});
Run Code Online (Sandbox Code Playgroud)