CODEWITHSUNDEEP
javascriptasp.netjsonknockout.jsasp.net-web-api
user2790781
user2790781

Reputation: 85

Knockout.js Bind a observable with single json object

im trying to databind a observable that has a single json object. I can do this with a ko.observablearray no problem with the foreach but not sure how to do it with a observale

this is my view model

var ViewModel = function () {
    var self = this;
    self.job = ko.observable();
}

self.job is has been populated with a json object from a api call and this works ok but im not sure how to databind to the html. i tried the foreach 

<p data-bind="foreach: job">
Name: <span data-bind="text: jobslist.Name"> </span>
Description: <span data-bind="text: jobslist.Description"> </span>
</p>

It doesn't give any error just blank

{
    "JobID":1,
    "JobsListID":1,
    "BookingID":2,
    "TimeAllowed":20,
    "TimeTaken":22,
    "Comments":"Some comments",
    "Status":"complete",
    "Notes":null,
    "TimeStarted":"2014-11-04T09:00:00",
    "Difficulty":1,
    "CompleteDate":"2014-11-04T09:22:00",
    "booking":null,
    "jobs_mechanics":[],
    "jobslist": {
        "JobsListID":1,
        "JobCategoryID":1,
        "Description":"Change Tyres                  ",
        "Name":"Tyres",
        "jobs":[],
        "jobscategory":null,
        "model_jobslist":[]
     },
     "timessheets":[]
}

Upvotes: 1

Views: 324

Answers (1)

krivtom
krivtom

Reputation: 24916

You should be able to get the results using with binding. Here is the code assuming you use local variable instead of web service call:

var data = {
    "JobID":1,
    "JobsListID":1,
    "BookingID":2,
    "TimeAllowed":20,
    "TimeTaken":22,
    "Comments":"Some comments",
    "Status":"complete",
    "Notes":null,
    "TimeStarted":"2014-11-04T09:00:00",
    "Difficulty":1,
    "CompleteDate":"2014-11-04T09:22:00",
    "booking":null,
    "jobs_mechanics":[],
    "jobslist": {
        "JobsListID":1,
        "JobCategoryID":1,
        "Description":"Change Tyres                  ",
        "Name":"Tyres",
        "jobs":[],
        "jobscategory":null,
        "model_jobslist":[]
     }, 
     "timessheets":[]
};
var ViewModel = function () {
    var self = this;
    self.job = ko.observable(data);
}
var vm = new ViewModel();
ko.applyBindings(vm);

And HTML:

<p data-bind="with: job().jobslist">
Name: <span data-bind="text: Name"> </span>
Description: <span data-bind="text: Description"> </span>
</p>

Here is a jsFiddle

Upvotes: 1

Related Questions