Knockoutjs Options Binding with JSON data?
I am trying to list the options for an select tag from server with the
help of knockouts options binding. I have a PHP page which returns the
JSON data which is pushed to an knockouts 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 the options are not listed in the select tag? Am i missing
something obvious?
No comments:
Post a Comment