Html 将带淘汰的js项添加到可观察数组中，但在表中不显示重复项？

在我的knockout js视图模型中有一个可观察的数组，它绑定到我视图中的html表（MVC上的razor视图）

此表使用另一个具有“添加”按钮的表中的项目填充，因此用户可以向目标表添加相同数量的项目。我的问题是，我想在我的另一个表中为每个项目只显示一个…因此，如果用户添加Item1 30次，该表需要显示Item1-30，而不是30次Item1。。当然，可观测数组必须有30个Item1项

---

如何才能做到这一点？

请尝试此代码段，其中self.items是包含所有项的原始数组

self.unique = ko.computed(function() {
    var values = ko.utils.arrayMap(self.items(), function(item){ return item.type})
    return ko.utils.arrayGetDistinctValues(values).sort();
});

---

尝试按计数对数组进行分组，如下所示

function GroupArrayByCount(arr) {
    var a = [],
        b = [],
        prev, result = [];

    arr.sort();
    for (var i = 0; i < arr.length; i++) {
        if (arr[i] !== prev) {
            a.push(arr[i]);
            b.push(1);
        } else {
            b[b.length - 1]++;
        }
        prev = arr[i];
    }
    for (var j = 0; j < a.length; j++) {
        result.push({
            name: a[j],
            count: b[j]
        });
    }
    return result;
}

---

Fiddle:

看看：ko.utils.arrayGetDistinctValues方法ko.utils.arrayGetDistinctValues是什么？这是新的淘汰赛吗？

self.groupedItems = ko.computed(function(){
    return GroupArrayByCount( self.items());
});