Populating bootstrap with Json data and JS Viewmodel knockout
I am using JSON and bootstrap controls in my project. In my JSON, I am fetching data from mine sql database
. Now I want to populate my control with my data, but it doesn't work, I can't see what I am doing wrong and I have searched a lot of scripts to get it to work.
This is my JSON ::
var Projectss = function (data) {
var self = this;
self.ProjectName = ko.observable(data.ProjectName);
}
var ProjectModel = function (Projects) {
var self = this;
self.Projects = ko.observableArray(Projects);
$.ajax({
url: "CreateTask.aspx/GetProjectList",
// Current Page, Method
data: '{}',
// parameter map as JSON
type: "POST",
// data has to be POSTed
contentType: "application/json; charset=utf-8",
// posting JSON content
dataType: "JSON",
// type of data is JSON (must be upper case!)
timeout: 10000,
// AJAX timeout
success: function (Result) {
var MappedProjects =
$.map(Result.d,
function (item) { return new Projectss(item); });
self.Projects(MappedProjects);
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
};
$(document).ready(function () {
var VM = new ProjectModel();
ko.applyBindings(VM);
})
</script>
Here I am trying to fill my selection, this is inside my td
div data-bind="foreach: Projects">
select data-bind="options: $root.MappedProjects, optionsText: ProjectName, value: 'ProjectName'">
/select>
/div>
source to share
With the optionsText
select binding option you need to specify your property name as a string, so you need to write 'ProjectName'
(note the single quotes).
However, binding requires the property itself, so you have to write (note there are no quotes). value
ProjectName
So the fixed binding looks like this:
<div data-bind="foreach: Projects">
<select data-bind="options: $root.MappedProjects,
optionsText: 'ProjectName', value: ProjectName">
</select>
</div>
source to share
I found an easier way to fill select with knockout:
HTML:
<div class="bar">
Select Query:
<select id="QueryName" data-bind="options: Data, optionsText: 'QueryName', value: QueryName, event: { 'change': vm.LoadQuery }">
</select>
</div>
You can add an event to load change data by adding the following: event: { 'change': vm.LoadQuery }
Knockout:
vm = {
Data: ko.observableArray(),
}
function LoadQueries() {
$.ajax({
type: "POST",
url: "ExportCustomQueriesList.aspx/GetQueries",
contentType: "application/json",
success: function (response) {
vm.Data(ko.utils.unwrapObservable(ko.mapping.fromJS(response.d)));
ko.applyBindings(vm);
//var n = noty({ text: 'Query in progress of execution', theme: 'default', layout: 'center', timeout: 2000, type: 'error' });
}
})
}
source to share