Remove duplicate from KOObservable array

Want to remove duplicate values from KoObservableArray. I have following JS file. I want to bind the name column in the UI as dropdown as well as to remove the duplicate values.

Suggest the best way to do the same.

JS File

$(function () {
    var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Furious Lizard", sales: 213, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
];

    var PagedGridModel = function (items) {
        this.items = ko.observableArray(items);       
    };

    ko.applyBindings(new PagedGridModel(initialData));
});

HTML File 
<body>

<nav>
<label for="name">Name</label>
        <select id="name" data-bind="options: items, optionsText: 'name', optionsCaption:'All'">
        </select>
</nav>

</body>

The above give me drop down with duplicate names.

标签： jquery knockout.js

1条回答

Anthone

2楼-- · 2019-08-05 16:58

See below for a sample of how you can have a computed observable returning an array. I have just written down the logic for filtering but it may not be correct or optimal, I will leave it to you to improve on it.

$(function () {
    var initialData = [
    { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Furious Lizard", sales: 152, price: 25.00 },
    { name: "Furious Lizard", sales: 213, price: 25.00 },
    { name: "Indifferent Monkey", sales: 1, price: 99.95 },
    { name: "Speedy Coyote", sales: 89, price: 190.00 },
    { name: "Brooding Dragon", sales: 0, price: 6350 },
    { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
    { name: "Optimistic Snail", sales: 420, price: 1.50 }
];

    var PagedGridModel = function (items) {
        var self = this;
        self.items = ko.observableArray(items);       
        self.uniqueItems = ko.computed({
            var filteredArray = [];
            var i;
            $.each(self.items(), function (index, item) {
                 bool alreadyAdded = false;
                 for (i in filteredArray) {
                      if (filteredArray[i].name == item.name) {
                            alreadyAdded = true;
                      }
                 }
                  if (!alreadyAdded) {
                       filteredArray.push(item);
                  }
            });
            return  filteredArray;
        });
    };

    ko.applyBindings(new PagedGridModel(initialData));
});

And finally in your HTML

<select id="name" data-bind="options: uniqueItems, optionsText: 'name', optionsCaption:'All'">
</select>

0人赞添加讨论(0) 举报

Remove duplicate from KOObservable array

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间