Issue with Knockout not binding to model

Question

I have an issue with Knockout binding to a model here is my code. The code fires and returns a JSON object but the table is empty. Any suggestions would be appreciated.

HTML

  <table  style="border: double">
   <thead>
    <tr>
     <td>jobId</td>
    </tr>
   </thead>
   <!--Iterate through an observableArray using foreach-->
   <tbody data-bind="foreach: Jobs">
    <tr style="border: solid" data-bind="click: $root.getselectedjob" id="updtr">
    <td><span data-bind="text: $data.jobId "></span></td>
    </tr>
   </tbody>
  </table>

Javascript

var JobViewModel = function () {
    //Make the self as 'this' reference
    var self = this;
    //Declare observable which will be bind with UI 
    self.jobId = ko.observable("");
    self.name = ko.observable("");
    self.description = ko.observable("");

    //The Object which stored data entered in the observables
    var jobData = {
        jobId: self.jobId,
        name: self.name,
        description: self.description
    };

    //Declare an ObservableArray for Storing the JSON Response
    self.Jobs = ko.observableArray([]);

    GetJobs(); //Call the Function which gets all records using ajax call

    //Function to Read All Employees
    function GetJobs() {
        //Ajax Call Get All Job Records
        $.ajax({
            type: "GET",
            url: "/Client/GetJobs",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                debugger;
                self.Jobs(data); //Put the response in ObservableArray
            },
            error: function (error) {
                alert(error.status + "<--and--> " + error.statusText);
            }
        });
        //Ends Here
    }

    //Function to Display record to be updated. This will be

    //executed when record is selected from the table
    self.getselectedjob = function (job) {
        self.jobId(job.jobId),
        self.name(job.name),
        self.description(job.description)
        //,
        //self.DeptName(employee.DeptName),
        //self.Designation(employee.Designation)
    };


};
ko.applyBindings(new JobViewModel());

C# Method to get jobs

    public ActionResult GetJobs(string AccountIDstr)
    {
        //parse this as parameter
        int AccountID = Convert.ToInt32(AccountIDstr);
        AccountID = 1;

        var jobs = (from c in db.jobs
                          select c).OrderByDescending(m => m.jobId).ToList();

        //"Business logic" method that filter jobs by the account id
        var jobsFilter = (from e in jobs
                                 where (AccountID == null || e.accountId == AccountID)
                                 select e).ToList();


        var jobsresult = from jobrows in jobsFilter
                      select new
                      {
                          jobId = jobrows.jobId.ToString(),
                          name = jobrows.name,
                          description = jobrows.description
                      };

        return Json(new
        {
            Jobs = jobsresult
        },
                    JsonRequestBehavior.AllowGet);
    }

JSON Object

{"Jobs":[{"jobId":"5","name":"Job 5 ","description":"Job 5 description"},{"jobId":"1","name":"Job 1 ","description":"Job 1 description"}]}

Answer 1

Your Jobs is an observableArray, but the data is wrapped in an object. When you set the value in GetJobs, you should be doing

self.Jobs(data.Jobs);

Here's a runnable snippet that works. You should be able to run this using your ajax function to populate data. If it doesn't work, examine what you're getting back.

var JobViewModel = function() {
  //Make the self as 'this' reference
  var self = this;
  //Declare observable which will be bind with UI 
  self.jobId = ko.observable("");
  self.name = ko.observable("");
  self.description = ko.observable("");

  //The Object which stored data entered in the observables
  var jobData = {
    jobId: self.jobId,
    name: self.name,
    description: self.description
  };

  //Declare an ObservableArray for Storing the JSON Response
  self.Jobs = ko.observableArray([]);

  GetJobs(); //Call the Function which gets all records using ajax call

  //Function to Read All Employees
  function GetJobs() {
    //Ajax Call Get All Job Records
    var data = {
      "Jobs": [{
        "jobId": "5",
        "name": "Job 5 ",
        "description": "Job 5 description"
      }, {
        "jobId": "1",
        "name": "Job 1 ",
        "description": "Job 1 description"
      }]
    };
    setTimeout(function() {
      self.Jobs(data.Jobs);
    }, 500);

  }

  //Function to Display record to be updated. This will be

  //executed when record is selected from the table
  self.getselectedjob = function(job) {
    self.jobId(job.jobId),
      self.name(job.name),
      self.description(job.description)
      //,
      //self.DeptName(employee.DeptName),
      //self.Designation(employee.Designation)
  };


};
ko.applyBindings(new JobViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js"></script>
<table style="border: double">
  <thead>
    <tr>
      <td>jobId</td>
    </tr>
  </thead>
  <!--Iterate through an observableArray using foreach-->
  <tbody data-bind="foreach: Jobs">
    <tr style="border: solid" data-bind="click: $root.getselectedjob" id="updtr">
      <td><span data-bind="text: $data.jobId "></span>
      </td>
    </tr>
  </tbody>
</table>