Converting Knockout js json to observable

Question

I am struggling to return JSON data and convert it into an observable. The data is returned fine in JSON format, but it doesn't seem to be assigned to the observable. Can anybody help? I am guessing the issue is in the success part of the ajax call :

<script type="text/javascript">

function StandingsViewModel() {
    var self = this;

    self.standings = ko.observableArray();

    self.DivisionName = ko.observable('');

    self.afceast = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "AFC East" == i.DivisionName;
        });
    });

    self.afccentral = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "AFC Central" == i.DivisionName;
        });
    });

    self.afcwest = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "AFC West" == i.DivisionName;
        });
    });

    self.nfceast = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "NFC East" == i.DivisionName;
        });
    });

    self.nfccentral = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "NFC Central" == i.DivisionName;
        });
    });

    self.nfcwest = ko.computed(function () {

        return ko.utils.arrayFilter(self.standings(), function (i) {
            return "NFC West" == i.DivisionName;
        });
    });

    $.ajax({
        dataType: "json",
        url: "/api/standing/GetStandingsBySeason/2018",
        beforeSend: function (xhr) {
            $('#divStandings').html('');
            $('#divStandings').addClass('ajaxRefreshing');
            xhr.setRequestHeader('X-Client', 'jQuery');
        },
        success: function (result) {
            $('#divStandings').removeClass('ajaxRefreshing');
            self.standings(JSON.parse(result));
        }
    });
}

$(document).ready(function () {
    ko.applyBindings(new StandingsViewModel());
});

</script>

Sławomir Rosiek · Accepted Answer · 2013-02-24 17:37:49Z

13

You should use Knockout Mapping plugin and map your result to observable.

var observableData = ko.mapping.fromJS(result);

or if your object wasn't parsed automatically by jQuery

var observableData = ko.mapping.fromJSON(result);

If your data type is array it will be converter to observableArray, so to get it items as normal array you should get like from any other observable by adding brackets;

var array = observableData();

That array can by assigned to your obsevableArray in that way:

self.standings(array);

edited Feb 24, 2013 at 17:37

answered Feb 24, 2013 at 13:38

Sławomir Rosiek

4,0733 gold badges28 silver badges44 bronze badges

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

7 Comments

user517406 Over a year ago

Didn't get this to work, alert(observableResult) gives this : function c(){if(0<arguments.length){if(!c.equalityComparer||!c.equalityComparer(d,arguments[0]))c.I(),d=arguments[0],c.H();return this}a.U.La(c);return d}. Do I need any other references?

Sławomir Rosiek Over a year ago

What is the result of the observableResult()? Are you sure that result isn't already parsed?

user517406 Over a year ago

alert(observableResult()) gives null

user517406 Over a year ago

None of the 3 options above populate self.standings

NaveenKumar1410 Over a year ago

Note: for ko.toJS(array) to work on older browsers that have no native JSON serializer (e.g., IE 7 or earlier), you must also reference the json2.js library.

|

Alerty · Accepted Answer · 2013-03-09 17:32:59Z

1

An alternative option to using the mapping plugin for Knockout would be to use Knockback. It is a bridge between Knockout and Backbone.

You easily get your data like so:

//Model
var StandingsModel = Backbone.Collection.extend({ 
    url:'/api/standing/GetStandingsBySeason/2018' 
});

//View model
var StandingsViewModel = function (standings) {
    this.standings = kb.collectionObservable(standings)
    //...
};

$(document).ready(function () {
    //Get data from server
    var model = new StandingsModel();
    model.fetch( function() {
        success: //...
    });

    //Apply bindings
    ko.applyBindings(new StandingsViewModel(model));
});

edited Mar 9, 2013 at 17:32

answered Feb 24, 2013 at 19:27

Alerty

5,9558 gold badges42 silver badges62 bronze badges

Collectives™ on Stack Overflow

Converting Knockout js json to observable

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related