Dropdown list display [object object] instead of value using knockout

Question

I am using knockout to try to bind data into a dropdown list but for some reason i am only seeing [object][object] instead of the actual value i want to display and not sure what i could be doing wrong. This is what i have so far:

self.views = ko.observableArray();  
self.selectedView = ko.observable();

if (views){  
     for(viewOption = 0; viewOption < views.length; viewOption++){  
          self.views.push(  
                  new viewModel(views[viewOption])  
             );  
         }  
   }

//Sample data

var sampleData = {
            viewers: [
                .....
            ],
            views: [
                {
                    vValue: 'View 1'
                },
                {
                    vValue: 'View 2'
                }
            ]
        };

//HTML

<select data-bind="options: views, value: selectedView"></select>

When i run this i get a dropdown displaying the right count of options but instead of showing View 1 and View 2 it shows [object][object] twice.

Answer 1

When you are using objects in array, you should use optionsText for option label and optionsValue for option value.

var vm = {
  myItems: [
    { vValue: 'View 1', id: 1},
    { vValue: 'View 3', id: 3},
    { vValue: 'View 4', id: 4}
  ],
  selected: ko.observable()
};
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<select data-bind="
    options: myItems,
    optionsText: 'vValue',
    optionsValue: 'id',
    value:selected" >
</select>
<br/>
Selected: <label data-bind="text: selected"></label>

Answer 2

Since you are supplying an array of complex types to the options binding, Knockout does not know what value you want to use as the "text" of your option item (even though you only have a single name/value pair). In most real-world scenarios, you would have more than just a text value in array of complex types.

You can either use the optionsText binding to instruct Knockout to use your value in the name/value pair of vValue, like this:

<select data-bind="options: views, value: selectedView, optionsText: 'vValue'">
</select>

Another way to handle this is to create the views array in your view model to just be an array of strings, then Knockout knows that the single string value in the array is the value to use as the option's text value.

UPDATE

You can just create a JavaScript array of strings, like this:

self.views = ["View1", "View2"];

Then you can keep your options binding syntax the same, as you do not have to bind to an observable array in Knockout, you can bind to just a plain ol' JavaScript array.

Note - Usually people have an observableArray, because their data is dynamic (either through loading from the server or user interaction), but there is no rule that bound objects must be "observable"; although you will not get two-way binding for something like a text input if you bind to a non-observable.