title: Populate bootstrap select with Json data And Knockout JS Viewmodel
body: <p>I am using JSON and bootstrap controls in my project. In my JSON I retrieve data from my <code>sql database</code>. 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.</p>
  
  <p>This is my JSON ::</p>
  
  <p></p>
  
  <pre><code>    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);
      })
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is where I am trying to populate my select, this is inside of my td</p>
  
  <pre><code>div data-bind="foreach: Projects"&gt;
   select data-bind="options: $root.MappedProjects, optionsText: ProjectName, value: 'ProjectName'"&gt;
  /select&gt;
  /div&gt;
  </code></pre>