Knockoutjs Options Binding with JSON data? - json

Question

I am trying to list the options for a select tag from server with the help of knockout options binding. I have a PHP page which returns the JSON data which is pushed to a knockout observable array which is binded to the select tag. But somehow it is not working, please refer to the following code for reference:
HTML:
<div class="form-group">
<select class="form-control">
<option data-bind="options: Country_Names, optionsText: 'country_name'"></option>
</select>
</div>
JavaScript:
$(document).ready(function(){
function appModel(session_info){
/* Session Info related bindings are commented as they are working fine */
var self = this;
this.Country_Names = ko.observableArray();
// Bindings related to the batch processing
$(function(){
$.ajax({
url:"../api/master_list.php",
type:"get",
data:{mastertype: '1'},
cache:false,
success:function(country_list){
ko.mapping.fromJSON(country_list, {}, self.Country_Names);
}
});
});
};
$.ajax({
url:"../api/sessions.php",
type:"get",
data: {rqtype: '1'},
cache:false,
success:function(session_info){
var data = $.parseJSON(session_info);
if (data.status == 'Invalid_id'){
window.location.replace('../files/main.html');
} else {
ko.applyBindings(new appModel(session_info));
}
}
});
});
Sample JSON:
[{"country_name":"Albania"},{"country_name":"Chile"},{"country_name":"Cuba"}]
Question, Why are the options not listed in the select tag? Am i missing something obvious?

Answer 1

You are data-binding the option element, whereas you want to put the bindings on the select, like this:
<select class="form-control" data-bind="options: Country_Names, optionsText: 'country_name'">
</select>
The <option...> element is gone; the options will be generated by Knockout.
Note that the relevant documentation is very clear on how all this works. If you haven't already, I suggest (re-)reading it.
Or, see this full demo:
var data = [{"country_name":"Albania"},{"country_name":"Chile"},{"country_name":"Cuba"}];
ko.applyBindings({ Country_Names: data });
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: Country_Names, optionsText: 'country_name'"></select>