Knockout select showing object object for optionsText

Question

I've got a json list of objects I've populated into an observablearray([]). I know the data is there because of if I do this:

<table id="tblColors">
<thead>
    <tr>
        <th padding: 10px; >Color</th>
    </tr>
</thead>
<tbody data-bind="foreach: AllColors">
    <tr>
        <td data-bind="text: ColorName"></td>
    </tr>
</tbody>

The view shows all the colors.

However, when I do this:

<select data-bind="options: AllColors, optionsText: AllColors.ColorName, 
    value: AllColors.ID, optionsCaption: 'Select Color...'"></select> 

I get the default "select color..." in the drop down box but each of the colors have [object Object]

I've tried optionsText: ColorName but the program stops and says JavaScript runtime error: 'ColorName' is undefined.

Answer 1

Try it like this

  <select data-bind="options: AllColors, optionsText: 'ColorName', value: selectedColor, optionsCaption: 'Choose...'></select

Where the single quotes (') are the secret sauce.