Click here to Skip to main content
15,947,389 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am using JSON and bootstrap controls in my project. In my JSON I retrieve data from my sql database. Now I want to populate my select control with my data but it doesn't work, I can't see what I am doing wrong and I have searched lots of fiddles 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);
})

This is where I am trying to populate my select, this is inside of my td

SQL
<div data-bind="foreach: Projects">
 <select data-bind="options: $root.MappedProjects, optionsText: ProjectName, value: 'ProjectName'">
</select>
</div>


I have created a jsfiddle jsfiddle.net/Fumunchu/N7J2E with the Json data but it still does not work.
Posted

1 solution

I Have found a solutions for my problem:

var ProjectViewModel = function(Projects)
{
var self = this;
self.items = ko.mapping.fromJS(Projects.d);
}

$.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) {
ko.applyBindings(new ProjectViewModel(Result));
},
error: function (xhr, status) {
alert(status + " - " + xhr.responseText);
}
});
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900