通過 knockout.js 從對象數組中刪除重復項或區別

Question

如何使用 Knockout.js 從數組中刪除重復對象

   var ticketgroups = [
      {TicketGroup: TicketGroup1, SortOrder: 1},
      {TicketGroup: TicketGroup1, SortOrder: 1},
      {TicketGroup: TicketGroup2, SortOrder: 2},
      {TicketGroup: TicketGroup2, SortOrder: 2},
      {TicketGroup: TicketGroup3, SortOrder: 3},
      {TicketGroup: TicketGroup3, SortOrder: 3},
    ];

輸出應該是

 var filltered = [
          {TicketGroup: TicketGroup1, SortOrder: 1},
          {TicketGroup: TicketGroup2, SortOrder: 2},
          {TicketGroup: TicketGroup3, SortOrder: 3},
        ];

如何綁定我的觀點。

<select id="customticketgroup" data-bind="options: $root.filltered.TicketGroup"/>

Answer 1

如果SortOrder應該是一個唯一值，您可以使用它來過濾掉重復項。 下面的示例使用Map來確保每個排序順序只有一個值。

 function uniquesBy(getKey, xs) { return Array.from( new Map( xs.map(x => [getKey(x), x]) ).values() ) } const TicketGroup1 = "Ticket Group 1"; const TicketGroup2 = "Ticket Group 2"; const TicketGroup3 = "Ticket Group 3"; const ticketgroups = [ {TicketGroup: TicketGroup1, SortOrder: 1}, {TicketGroup: TicketGroup1, SortOrder: 1}, {TicketGroup: TicketGroup2, SortOrder: 2}, {TicketGroup: TicketGroup2, SortOrder: 2}, {TicketGroup: TicketGroup3, SortOrder: 3}, {TicketGroup: TicketGroup3, SortOrder: 3}, ]; ko.applyBindings({ filtered: uniquesBy(g => g.SortOrder, ticketgroups) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <select data-bind=" options: filtered, optionsText: 'TicketGroup' "></select>

如果您的 ticketgroups 數組實際上是observableArray ，您可以使用pureComputed進行filtered 。 如果您在排序后只對TicketGroup屬性感興趣，則可以鏈接.map(g => g.TicketGroup)來提取值。

 function uniquesBy(getKey, xs) { return Array.from( new Map( xs.map(x => [getKey(x), x]) ).values() ) } const TicketGroup1 = "Ticket Group 1"; const TicketGroup2 = "Ticket Group 2"; const TicketGroup3 = "Ticket Group 3"; const ticketgroups = ko.observableArray([ {TicketGroup: TicketGroup1, SortOrder: 1}, {TicketGroup: TicketGroup1, SortOrder: 1}, {TicketGroup: TicketGroup2, SortOrder: 2}, {TicketGroup: TicketGroup2, SortOrder: 2}, {TicketGroup: TicketGroup3, SortOrder: 3}, {TicketGroup: TicketGroup3, SortOrder: 3}, ]); ko.applyBindings({ filtered: ko.pureComputed(() => uniquesBy(g => g.SortOrder, ticketgroups()) .map(g => g.TicketGroup) ) });

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