Click here to Skip to main content
11,705,617 members (54,371 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: JSON KnockoutJS
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

<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 19-Jan-13 3:00am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

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);
}
});
  Permalink  
v2

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

  Print Answers RSS
0 OriginalGriff 213
1 Sergey Alexandrovich Kryukov 170
2 Inimicos 60
3 ProgramFOX 50
4 Richard MacCutchan 45
0 OriginalGriff 9,053
1 Sergey Alexandrovich Kryukov 8,347
2 CPallini 5,189
3 Maciej Los 4,726
4 Mika Wendelius 3,626


Advertise | Privacy | Mobile
Web03 | 2.8.150819.1 | Last Updated 19 Jan 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100