Grouping / counting in javascript using underscore.js

Question

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:

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

The pie ratio in the example above would be 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.

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:

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.

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.

Answer 1

countBy could be used instead of 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:

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