通过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，那么您可以为filtered使用pureComputed。如果您只对排序后的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>