knockout mapping JSON update existing view model

Question

I have this JSON data coming from the server:

{"HaveNotification":false,"IsError":false,"Title":null,"Description":null}

and am trying to populate this view model via ko.mapping:

var notifyVM = {
  HaveNotification: ko.observable(true),
  IsError: ko.observable(false), 
  Title: ko.observable('Title goes here'), 
  Description: ko.observable('Description goes here'), 
}

with this code, which is called on a polling interval:

function pollNotifications() {

  $.getJSON('@Url.Action("GetNotifications", "Home")', function (data) {

    ko.mapping.fromJSON(data, notifyVM);

    setTimeout(pollNotifications, 10000);
  });
}

and this is page load code:

$(function () {

  ko.applyBindings(notifyVM);

  setTimeout(pollNotifications, 10000);
});

but its not working. If I inspect the view model after the fromJSON call the observables are not updated, they are still at their initial values.

UPDATE: Some more info... if I do this in the pollNotifications function

var newVM = ko.mapping.fromJSON(data);

I notice that the view model it creates is not the same as my one, it consists of a single observable function, whereas mine is an object with a set of observable properties.

try to use ko.mapping.fromJS

ebram khalil
– ebram khalil

2013-08-01 10:48:18 +00:00
Commented Aug 1, 2013 at 10:48 — ebram khalil
– ebram khalil, Commented Aug 1, 2013 at 10:48

Tom Mulgrew · Accepted Answer · 2015-02-24 00:20:25Z

10

Try:

ko.mapping.fromJS(data, {}, notifyVM);

The two parameter form expects a view-model that was previously created with ko.mapping.fromJS. If it doesn't find one (based on looking for a specific property that fromJS adds), it assumes you're calling the fromJS(data, options) form.

The 3 parameter form removes this ambiguity.

answered Feb 24, 2015 at 0:20

Tom Mulgrew

1311 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Michel Over a year ago

Wicked Whoot and da bomb! This one saved my day, thanks!

tschan Over a year ago

Worked for me as well. Thanks a lot! This should be the accepted answer.

pscheit · Accepted Answer · 2014-05-28 16:44:01Z

0

You should use ko.mapping.fromJS instead of ko.mapping.fromJSON because $.getJSON is returning a data object (not an json string):

The success callback is passed the returned data, which is typically a JavaScript object or array as defined by the JSON structure and parsed using the $.parseJSON() method. It is also passed the text status of the response.

http://api.jquery.com/jquery.getjson/

do a console.log(data); to see the difference

answered May 28, 2014 at 16:44

pscheit

3,02130 silver badges30 bronze badges

Comments

Karl Anderson · Accepted Answer · 2013-08-01 00:58:43Z

-1

Have you tried manually mapping the values to the view model and seeing if that works, like this?

function pollNotifications() {
    $.getJSON('@Url.Action("GetNotifications", "Home")', function (data) {
        notifyVM.HaveNotification(data.HaveNotification);
        notifyVM.IsError(data.IsError);
        notifyVM.Title(data.Title);
        notifyVM.Description(data.Description);

        setTimeout(pollNotifications, 10000);
    });
}

If the above does not work, then you know it is an issue with your data; otherwise the mapping is not happening correctly with ko.mapping.fromJSON().

answered Aug 1, 2013 at 0:58

Karl Anderson

34.9k12 gold badges69 silver badges83 bronze badges

2 Comments

user380689 Over a year ago

Yes, that works if I manually update the values. But I would really like to know why the ko.mapping method is not working. I suspect the JSON data structure is not matching up with my view model, but I can't see where or why.

Karl Anderson Over a year ago

Have you tried ko.mapping.fromJS(data, notifyVM); instead of the fromJSON() function? I am wondering if the fromJSON() function is disqualifying your data as being interpreted as JSON.

Collectives™ on Stack Overflow

knockout mapping JSON update existing view model

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related