title: Knockout - groupable array
body: <p>From the tutorial, I am trying to understand this promising framework.
  My question is how to extract some data from an observable array (filter)?
  I found a similar quesion here :
  <a href="https://stackoverflow.com/questions/9877301/knockoutjs-observablearray-data-grouping">similar question</a></p>
  
  <p>But I don't know how to implement it.
  here is the test :
  <a href="http://jsfiddle.net/kiminox/gbWmm/1/" rel="nofollow noreferrer">jsfiddle</a></p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;h2&gt;Your seat reservations (&lt;span data-bind="text: seats().length"&gt;&lt;/span&gt;)&lt;/h2&gt;
  &lt;h4&gt;
  Distribution by meal type:
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr data-bind="foreach: availableMeals"&gt;
                  &lt;th&gt;&lt;span data-bind="text: mealName"&gt;&lt;/span&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr data-bind="foreach: availableMeals"&gt;
                  &lt;td&gt;???&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/h4&gt;
  &lt;table&gt;
      &lt;thead&gt;&lt;tr&gt;
          &lt;th&gt;Passenger name&lt;/th&gt;&lt;th&gt;Meal&lt;/th&gt;&lt;th&gt;Surcharge&lt;/th&gt;&lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;&lt;/thead&gt;
      &lt;tbody data-bind="foreach: seats"&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input data-bind="value: name" /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;select data-bind="options: $root.availableMeals, value: meal, optionsText: 'mealName'"&gt;&lt;/select&gt;&lt;/td&gt;
              &lt;td data-bind="text: formattedPrice"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;a href="#" data-bind="click: $root.removeSeat"&gt;Remove&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;    
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;button data-bind="click: addSeat, enable: seats().length &lt; 7"&gt;Reserve another seat&lt;/button&gt;
  
  &lt;h3 data-bind="visible: totalSurcharge() &gt; 0"&gt;
      Total surcharge: $&lt;span data-bind="text: totalSurcharge().toFixed(2)"&gt;&lt;/span&gt;
  &lt;/h3&gt;
  </code></pre>
  
  <p>JS code :</p>
  
  <pre><code>// extend from the link to the similar question from stackoverflow:
  ko.observableArray.fn.distinct = function(prop) {
      var target = this;
      target.index = {};
      target.index[prop] = ko.observable({});    
      //Group by already set up, bail out.
      if (target.index &amp;&amp; target.index[prop]) return target;
      ko.computed(function() {
          //rebuild index
          var propIndex = {};
  
          ko.utils.arrayForEach(target(), function(item) {
              var key = ko.utils.unwrapObservable(item[prop]);
              if (key) {
                  propIndex[key] = propIndex[key] || [];
                  propIndex[key].push(item);            
              }
          });   
  
          target.index[prop](propIndex);
      });
  
      return target;
  };
  
  // Class to represent a row in the seat reservations grid
  function SeatReservation(name, initialMeal) {
      var self = this;
      self.name = name;
      self.meal = ko.observable(initialMeal);
  
      self.formattedPrice = ko.computed(function() {
          var price = self.meal().price;
          return price ? "$" + price.toFixed(2) : "None";        
      });    
  }
  
  // Overall viewmodel for this screen, along with initial state
  function ReservationsViewModel() {
      var self = this;
  
      // Non-editable catalog data - would come from the server
      self.availableMeals = [
          { mealName: "Standard (sandwich)", price: 0 },
          { mealName: "Premium (lobster)", price: 34.95 },
          { mealName: "Ultimate (whole zebra)", price: 290 }
      ];    
  
      // Editable data
      self.seats = ko.observableArray([
          new SeatReservation("Steve", self.availableMeals[0]),
          new SeatReservation("Bert", self.availableMeals[0]),
          new SeatReservation("Steve", self.availableMeals[1]),
          new SeatReservation("John", self.availableMeals[1]),
          new SeatReservation("Frank", self.availableMeals[1]),
          new SeatReservation("Evan", self.availableMeals[2])
      ]);
  
      // Computed data
      self.totalSurcharge = ko.computed(function() {
         var total = 0;
         for (var i = 0; i &lt; self.seats().length; i++)
             total += self.seats()[i].meal().price;
         return total;
      });    
  
      // Operations
      self.addSeat = function() {
          self.seats.push(new SeatReservation("", self.availableMeals[0]));
      }
      self.removeSeat = function(seat) { self.seats.remove(seat) }
  }
  
  ko.applyBindings(new ReservationsViewModel());
  </code></pre>
  
  <p>I worked from the KO tutorial : the pb is I want to display a distribution of customers by meal types?</p>