# Displaying a value and binding a object

**URL:** <https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188>\
**Category:** Help Requests\
**Created:** [April 20, 2021, 8:17am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188 "2021-04-20T08:17:45Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![zebravis](https://avatars.discourse-cdn.com/v4/letter/z/da6949/32.png) [@zebravis](https://discourse.aurelia.io/u/zebravis)\
**Post date:** [April 20, 2021, 8:17am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/1 "2021-04-20T08:17:45Z")

</div>

I’ve ran into an issue i can’t quite solve. (I hope it’s something obvious ;)) How do i display one value and bind another from the dropdown to send to a function. Right now everything works as intended except the value of select.

```auto
<div class="row" repeat.for="row of distProductList">
  <div class="col-sm-2 mt-2 mb-2">
    ${row.productName}
      <select value="${row.productName}" value.bind="product" class="form-control product-selector" change.delegate="changeRow(row, product)">
       <option></option>
       <option repeat.for="product of products" model.bind="product">
        ${product.productName}
      </option>
    </select>
 </div>

```

I need the ${row.productname} to show the productName from the distProductList (a list of distinct products), and i also need to bind a product if a change is registered (the model.bind from option) right now the value from select is not showing, but the one in front of the select is.

I’m quite new to Aurelia so if anything is not clear please say so!

Thanks

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 20, 2021, 8:39am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/2 "2021-04-20T08:39:44Z")

</div>

I’ve prepared a gist here [https://gist.dumber.app/?gist=fd260ea389548394d46af95ffb917d88](https://gist.dumber.app/?gist=fd260ea389548394d46af95ffb917d88)

Can you help update it to show the issues clearer? It’s a bit hard to guess from what described.

---

<div class="post-metadata">

**Author:** ![zebravis](https://avatars.discourse-cdn.com/v4/letter/z/da6949/32.png) [@zebravis](https://discourse.aurelia.io/u/zebravis)\
**Post date:** [April 20, 2021, 8:50am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/3 "2021-04-20T08:50:55Z")

</div>

Hello! Thanks for wanting to help! I’ve updated the gist to show how i want it to look (:

(does it save automatically? never used gist before haha)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 20, 2021, 8:58am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/4 "2021-04-20T08:58:13Z")

</div>

You will have to fork it, then update the code, and then save it, and then share the link

---

<div class="post-metadata">

**Author:** ![zebravis](https://avatars.discourse-cdn.com/v4/letter/z/da6949/32.png) [@zebravis](https://discourse.aurelia.io/u/zebravis)\
**Post date:** [April 20, 2021, 9:05am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/5 "2021-04-20T09:05:01Z")

</div>

Awesome, thanks.

I hope that what i want is a little clearer now 🙂  
[https://gist.dumber.app/?gist=1b816b0afce2ad94d491b366b30f8ff7](https://gist.dumber.app/?gist=1b816b0afce2ad94d491b366b30f8ff7)

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 20, 2021, 9:17am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/6 "2021-04-20T09:17:22Z")

</div>

I’m still not 100% sure what you want. So I updated my gist above with:

- add a `<let />` element to declare a `product` variable in the scope of each repeat item
- bind `<select/>` value to that `product`, remove `value=${row.productName}` from the `<select/>`, as this interferes with two way binding from `value.bind="product"` on the `<select/>`

---

<div class="post-metadata">

**Author:** ![zebravis](https://avatars.discourse-cdn.com/v4/letter/z/da6949/32.png) [@zebravis](https://discourse.aurelia.io/u/zebravis)\
**Post date:** [April 20, 2021, 9:45am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/7 "2021-04-20T09:45:06Z")

</div>

I’ve updated my fork with extra information. Please let me know if something needs extra clarification

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 20, 2021, 9:49am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/8 "2021-04-20T09:49:58Z")

</div>

The `${row.productName}` is outside of the `<select/>` because by default, there’s no value given to it yet. So it seems you just need to initialize the value in the `<let/>` to something like this:

```auto
    <let product.bind="products[0] || null"></let>

```

I’ve updated my gist as well

---

<div class="post-metadata">

**Author:** ![zebravis](https://avatars.discourse-cdn.com/v4/letter/z/da6949/32.png) [@zebravis](https://discourse.aurelia.io/u/zebravis)\
**Post date:** [April 20, 2021, 10:34am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/9 "2021-04-20T10:34:03Z")

</div>

Okay so if i understand correctly i need to bind a product to my `<select>` in order to display the name of the product.

So that brings up another question; how do i bind the product from the distProductList row to the `<let>` element?

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [April 20, 2021, 10:40am UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/10 "2021-04-20T10:40:40Z")

</div>

`<select/>` displays whatever the option that matches its value, which means you should bind the `value` property of the `<select/>` element to the real value that you want to display, and ensures that one of the `<option/>` has that matching value as well.

---

<div class="post-metadata">

**Author:** ![zebravis](https://avatars.discourse-cdn.com/v4/letter/z/da6949/32.png) [@zebravis](https://discourse.aurelia.io/u/zebravis)\
**Post date:** [April 20, 2021, 12:01pm UTC](https://discourse.aurelia.io/t/displaying-a-value-and-binding-a-object/4188/11 "2021-04-20T12:01:58Z")

</div>

I’m sorry, I don’t quite get it. 😅

I do get that the `<select>` displays the option that matches its value (which is a product), but how do i get the corresponding product in products from row in distProductList and bind it to the `<let>` element?

So how do i get `[$index]` in `<let product.bind="products[$index] || null"></let>` to be the index of the products array where row.id === product.id.

Thanks for your patience