Count duplicates within observableArray and Display them

Question

I have an observable array With the following Data

["Volkswagen",
 "Toyota",
 "Volkswagen",
 "Toyota",
 "Audi",
 "Volkswagen",
 "Toyota",
 "Audi"]

I would like to know how I can count the duplicate values and display them within my select box. Something like:

Volkswagen (3)
Audi (2)
Toyota (3)

What is the best way to achieve this?

You want to achieve GroupBy. See http://stackoverflow.com/questions/14446511/what-is-the-most-efficient-method-to-groupby-on-a-javascript-array-of-objects — roland, May 02 '15 at 08:55

T.J. Crowder · Accepted Answer · 2015-04-26T10:34:09.610

I'd probably use a fairly straightforward computed:

viewModel.collapsedMakes = ko.computed({
  pure: true,
  owner: viewModel,
  read: function() {
    var makes = {}, rv;
    // Use an object to count them
    this.makes().forEach(function(make) {
      if (makes[make]) {
        ++makes[make];
      } else {
        makes[make] = 1;
      }
    });

    // Build the array
    rv = Object.keys(makes).sort().map(function(make) {
      return make + " (" + makes[make] + ")";
    });
    return rv;
  }
});

Live example:

var viewModel = {
  makes: ko.observableArray([
    "Volkswagen",
    "Toyota",
    "Volkswagen",
    "Toyota",
    "Audi",
    "Volkswagen",
    "Toyota",
    "Audi"
  ])
};

viewModel.collapsedMakes = ko.computed({
  pure: true,
  owner: viewModel,
  read: function() {
    var makes = {}, rv;
    // Use an object to count them
    this.makes().forEach(function(make) {
      if (makes[make]) {
        ++makes[make];
      } else {
        makes[make] = 1;
      }
    });

    // Build the array
    rv = Object.keys(makes).sort().map(function(make) {
      return make + " (" + makes[make] + ")";
    });
    return rv;
  }
});

ko.applyBindings(viewModel, document.body);

<select data-bind="options: collapsedMakes"></select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

score 1 · Answer 2 · answered Apr 26 '15 at 11:09

T.J. Crowder's solution is great, but I want to show a simplified version of his read function, which takes advantage of Knockout's remove function:

var arr= ko.observableArray(this.makes().slice()),
        s= [];

arr.sort().forEach(function(val) {
  var len= arr.remove(val).length;
  s.push(val+' ('+len+')');
});

return s;

Using slice clones the original array, so this is non-destructive.

var viewModel = {
  makes: ko.observableArray([
    "Volkswagen",
    "Toyota",
    "Volkswagen",
    "Toyota",
    "Audi",
    "Volkswagen",
    "Toyota",
    "Audi"
  ])
};

viewModel.collapsedMakes = ko.computed({
  pure: true,
  owner: viewModel,
  read: function() {
    var arr= ko.observableArray(this.makes().slice()),
        s= [];

    arr.sort().forEach(function(val) {
      var len= arr.remove(val).length;
      s.push(val+' ('+len+')');
    });

    return s;
  }
});

ko.applyBindings(viewModel, document.body);

<select data-bind="options: collapsedMakes"></select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

Peter Wone · Answer 3 · 2015-05-02T08:49:27.457

0

In the spirit of DRY I suggest you check this out http://linqjs.codeplex.com/

This will give you most of LINQ client side in your spa. Summing is only one of the things you can then do in a single line of code.

edited May 02 '15 at 08:49

answered Apr 30 '15 at 05:43

Peter Wone

17,965
12
82
134

Count duplicates within observableArray and Display them

3 Answers3