knockoutJs ko.utils.arrayFirst not allowing duplicate values as results

Question

I am new to knockoutJs, as i am trying to display the selected values by binding. But am facing issues with duplicate values.

For example:

• As per the below example snippet, If i select one from the dropdown, the binding result is displaying name "one" as selected, this is correct.

{name:"one",price:32.50}, {name:"two",price:32.50},

• After that if I select other option from drop down i.e name two, the binding result is not displaying name two as selected, instead it is keep displaying the name="one" only, which is in-correct.
• Observation: I see that this is happening due to the same price set for all the option values, if I update them with different prices the options values are binding properly.
• Here my confusion is that why the binding logic is not applying properly when the price value is same but the name is different.

I am trying to achieve this by below code.

Html

<select data-bind="options: beforeEventPedersensDropoffCustomerLocation,optionsCaption: 'Please Choose Closest Location',
    optionsText: 'name', optionsValue: 'price', value: selectedPricebepdcl" id="before_event_pedersens_dropoff_customer_location_time" ></select>

Js

    self.beforeEventPedersensDropoffCustomerLocation = [
    {name:"one",price:32.50},
    {name:"two",price:32.50},
    {name:"three",price:32.50},
    {name:"four",price:32.50},
    {name:"five",price:32.50},
    {name:"six",price:32.50},
    {name:"seven",price:0}
  ];
   self.selectedPricebepdcl = ko.observable("");

   console.log()
    self.beforeEventVal = ko.computed(function() {
    if(self.selectedPricebepdcl() !== "")
      return ko.utils.arrayFirst(self.beforeEventPedersensDropoffCustomerLocation, function(time) {
        return self.selectedPricebepdcl() === time.price;
      });
    return null;
  }, this); 

Result

            <p data-bind="with: beforeEventVal">
                <span data-bind="text: name"></span>   
            </p>
            <p data-bind="with: beforeEventVal">
                <span data-bind="text: price"></span>
            </p>

Can anyone help me on this.

Answer 1

The problem is that you have set optionsValue: 'price', so the only information you have about which item is selected is the price. Then you try to use that to find the selected item from among the available items, but you cannot do that because it is not a unique identifier.

Instead, if you don't specify optionsValue, Knockout will use the entire item as the value of the select. That also lets you do away with looking up the selected value, because you have the selected value.

function VM() {
  self = this;
  self.beforeEventPedersensDropoffCustomerLocation = [{
      name: "one",
      price: 32.50
    },
    {
      name: "two",
      price: 32.50
    },
    {
      name: "three",
      price: 32.50
    },
    {
      name: "four",
      price: 32.50
    },
    {
      name: "five",
      price: 32.50
    },
    {
      name: "six",
      price: 32.50
    },
    {
      name: "seven",
      price: 0
    }
  ];
  self.selectedBepdcl = ko.observable("");
  self.selectedName = ko.pureComputed(() => {
    const sb = self.selectedBepdcl();

    return sb && sb.name ? sb.name : '';
  });
}

ko.applyBindings(new VM());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: beforeEventPedersensDropoffCustomerLocation,
    optionsCaption: 'Please Choose Closest Location',
    optionsText: 'name',
    value: selectedBepdcl" id="before_event_pedersens_dropoff_customer_location_time">
</select>
<p data-bind="with: selectedBepdcl">
  <span data-bind="text: name"></span>
</p>
<p data-bind="with: selectedBepdcl">
  <span data-bind="text: price"></span>
</p>
Pretend this is hidden:
<input data-bind="value: selectedName">