Populate bootstrap select with Json data And Knockout JS Viewmodel

Question

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

</script>

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>

Answer 1

With the optionsText select binding option you need to specify your property name as string so you need to write 'ProjectName' (note the single quotes).

However the value binding needs the property itself so you need to write ProjectName (note there are no quotes).

So the fixed binding looks like this:

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

Answer 2

I found an easier way to populate a 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>

Can add an event to load data on change 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' });
            }
        })
    }