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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/25119323/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 03:58:46  来源:igfitidea点击:

Grouping / counting in javascript using underscore.js

javascriptarrayshighchartsunderscore.js

提问by jdmarlon

I am new to javascript (and to Stack Overflow) and I've encountered a problem I can't seem to solve. I am trying to generate a simple pie chart that shows the number of Projects for each value of Technology in my data. This is the kind of data I am working with:

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

  • [Project1, Java]
  • [Project2, Excel]
  • [Project3, SAS]
  • [Project4, Java]
  • [项目1,Java]
  • [项目2,Excel]
  • [项目3,SAS]
  • [Project4,Java]

The pie ratio in the example above would be 2:1:1.

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

The first part of my code loads the data and pushes it to an array, "techArray", that contains [project, tech]. This part works ok - I've verified it in a simplified version of the code.

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

I then want to group the array "techArray" and count the instances of each tech. To do so I'm using the Underscore library, as follows:

然后我想对数组“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
    });
});

The script then renders the chartData array using highcharts. Again, I have verified that this section works using a simplified (ungrouped) version.

然后脚本使用 highcharts 呈现 chartData 数组。同样,我已经验证本节使用简化(未分组)版本工作。

There must be an issue with the grouping/counting step outlined above because I am seeing no output, but I simply can't find where. I am basing my solution on the following worked example: Worked example.

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

If anyone can spot the error in what I've written, or propose another way of grouping the array, I'd be very grateful. This seems like it should be a simpler task than it's proving to be.

如果有人能发现我所写内容中的错误,或者提出另一种对数组进行分组的方法,我将不胜感激。这似乎应该是一个比事实证明更简单的任务。

回答by Gruff Bunny

countBycould be used instead of groupBy:

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');

This will return an object with the tech as properties and their value as the count:

这将返回一个对象,其技术作为属性,它们的值作为计数:

{ Java: 2, Excel: 1, SAS: 1 }

To get the data in the form for highcharts use map instead of each:

要以 highcharts 的形式获取数据,请使用 map 而不是每个:

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

回答by Jonathan Lerner

This should work

这应该工作

var techArray = [['Project1','Java'], ['Project2', 'excel'], ['Project3', 'Java']];

var chartData = [];
var techData = _.groupBy(techArray, function(item) {
    return item[1];
});
_.each(techData, function(value, key) {
    var techCount = value.length;
    chartData.push({
        name: key,
        y: techCount
    });
});

_.groupByneeds to either get a property name, or a function that returns the value being grouped. There is no techproperty of an array, so you cant group by it. But, as our techArrayis an array of tuples, we can pass a function _.groupBythat returns the value that we want to groupBy, namely the second item in each tuple.

_.groupBy需要获取属性名称或返回分组值的函数。tech数组没有属性,因此您不能对其进行分组。但是,由于我们techArray是一个元组数组,我们可以传递一个函数_.groupBy来返回我们想要分组的值,即每个元组中的第二项。

chartDatanow looks like this:

chartData现在看起来像这样:

[{
    name: 'Java',
    y: 2
}, {
    name: 'excel',
    y: 1
}]