Click here to Skip to main content
12,943,742 members (55,850 online)
Rate this:
 
Please Sign up or sign in to vote.
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

<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
Top Experts
Last 24hrsThis month
OriginalGriff 4,643
CHill60 2,970
Maciej Los 2,348
Jochen Arndt 1,900
ppolymorphe 1,765


Advertise | Privacy | Mobile
Web02 | 2.8.170518.1 | Last Updated 19 Jan 2013
Copyright © CodeProject, 1999-2017
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